CSS選擇器總結

2021-10-23 20:36:08 字數 1344 閱讀 6289

1.元素選擇器

元素名(標籤名)

元素選擇器的特點,所有該元素名的元素都受該效果影響

人生哪有一路高歌,還不是會有低鳴。

但我們在低鳴時,千萬不要忘記我們的雄心壯志。

待我們一鳴驚人時,讓世間萬人銘記。

人生哪有一路高歌,還不是會有低鳴。

但我們在低鳴時,千萬不要忘記我們的雄心壯志。

2.類名選擇器:就是通過類名來控制樣式的改變,那麼什麼是類名呢?比如

,class裡面的就是類名,那麼類名在css樣式又是怎樣被呼叫呢?

**如下:

"fenyun">風帶走了雲,卻帶不走我憂傷的心情。

"fanyou">誰能解決這心中的煩憂,罷了,隨風去吧!

善!

3.id選擇器

id選擇器以井號為字首,後面為id名稱。

在標籤中中定義id屬性,然後在裡面設定的屬性值就是id名稱。

"en">"idxuanzeqi">

下面在index.css檔案中寫入css樣式

#idxuanzeqi

4.屬性選擇器

使用屬性選擇器在css中非常有用,尤其是設定表單的時候

html

"time" class="form-control">
.form-control

&[type="time"]

}

上面[type=***]就是屬性選擇器的寫法,

5.關係選擇器

e f :選擇e元素的後代元素f(所有後代,包括子類、孫類)

e > f : 選擇e元素的直接後代元素(也就是子類)

e + f:選擇e元素的第乙個弟弟元素f

e ~ f: 選擇e元素的所有弟元素f

6.並選擇器

將相同的樣式放在一起,類名直接用逗號分開

7.萬用字元選擇器

萬用字元選擇器可以選中頁面所有的標籤

*寫法:*

你好,北京!!!

"style1">新聞一

"style1">新聞二

"style1">新聞三

"style2">新聞四這是一條很重要的新聞!第二次巢狀span

#style2 

#style2 span

#style2 span span

s

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS總結 CSS選擇器

css3選擇器最新部分,有人也稱這種選擇器為css3結構類,下面我們通過實際的應用來具體了解他們的使用和區別,首先列出他具有的選擇方法 first child選擇某個元素的第乙個子元素 last child選擇某個元素的最後乙個子元素 nth child 選擇某個元素的乙個或多個特定的子元素 nth...

CSS選擇器總結

通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...