細說C3選擇器

2021-09-19 05:28:44 字數 2468 閱讀 4934

今天介紹一下,css選擇器和選擇器的優先順序。

更加專業性的介紹,來看一下w3school中的描述,**為:

下面單獨說一下容易混淆的內容:

element>element 和 element element的區別:

element element | div p | 選擇 元素內部的所有 元素。    

element>element | div>p | 選擇父元素為 元素的所有 元素。

加》的表示單純的父子級關係,而不加》的為祖先關係,祖先關係包含父子級關係。這裡很好理解,就不再展開說明了。

a標籤的四個偽類:link,visited,hover,activelink: 鏈結未被訪問

visited: 鏈結已經被訪問過

hover: 滑鼠懸停在a標籤

active: a標籤被滑鼠按著時

這四個偽類在書寫時,要按照一定的順序:lvha,這是因為css中規定,同等優先權的樣式,寫在後面的會覆蓋前面的。可以利用love和hate來記憶。

注意區分nth-child(n)和nth-of-type(n)

p: nth-child(n) //p標籤且為第n個子元素

p: nth-of-type(n) //第n個p標籤

這個還是非常有必要詳細展開的。

第乙個段落。

第二個段落。

第三個段落。

第四個段落。

注釋:internet explorer 不支援 :nth-child() 選擇器。

在這段**中p:nth-child(2)表示p元素且為第二個子元素,p元素的父級為body,所以「第乙個段落」的p標籤為第二個子元素。將第二個子元素改為div,那麼來看如下的**:

發現p:nth-child(2)所尋找的元素不存在。因為不滿足第二個條件。

再來說說nth-of-type(n),這個比較理解,因為它的判斷條件只有乙個,第n個元素,我們將上面這段**變換如下:

第乙個段落。

第二個段落。

第三個段落。

第四個段落。

注釋:internet explorer 不支援 :nth-child() 選擇器。

那再來一段比較兩者的**:

第乙個段落。

第二個段落。

第三個段落。

第四個段落。

注釋:internet explorer 不支援 :nth-child() 選擇器。

這樣就能很清楚的看出兩者的區別了。

在w3school中並沒有給各個選擇器名字,在css權威指南一書中,給出了選擇器的名字,如通配選擇器*{},id選擇器#id{},class選擇器.class{},等等。

我們可以通過多個選擇器給乙個目標元素新增樣式,如可以用通配選擇器給所有元素乙個border值,可以用div{}給所有div乙個border值,還可以通過它的class名id名或者它的父級來設定border,那問題來了,這麼多border,它要取哪個呢?

選擇器的優先順序,目前在網上來看有兩種方法,但遵循的規則是一樣的,即採用加權的計算方法,!important > id選擇器 > class選擇器 > 其他選擇器。

!important 並不推薦使用,但存在就有存在的理由,但凡出現!important,均以!important為準,那要是出現多個呢?以最後乙個為準。

可以給上述的選擇器乙個權值,如下(當然也可以自己設定乙個權值,這個權值不易過小)

```

!important -- 1000

id選擇器 -- 100

class選擇器 -- 10

其他選擇器 -- 1

```

另外一種方法是,

```

!important : id選擇器 : class選擇器 : 其他選擇器

eg. 1 : 0 : 0 : 0

0 : 1 : 0 : 1

0 : 0 : 1 : 0

0 : 0 : 0 : 1

```

這裡的比較大小怎麼計算就很好看出了,從左向右比較,先比較左邊第一位,相同則比較下一位,直到出現不同,較大的優先順序高。上面中的例子eg,是優先順序由大到小排列。

H5C3 屬性選擇器 兄弟選擇器 偽類選擇器

1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title title title 6 style 7.red 10.green 13.blue 1617 屬性選擇器的使用 18 需求 獲取所有擁有class屬性的元素,將字型大...

CSS3選擇器 屬性選擇器

指定屬性名,但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名,並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名,具...

CSS3 選擇器 屬性選擇器

屬性選擇器早在css2中就被引入了,其主要作用就是對帶有指定屬性的html 元素設定樣式。使用css3屬性選擇器,你可以只指定元素的某個屬性,或者你還可以同時指定元素的某個屬性和其對應的屬性值。選擇有某個屬性的元素,而不管這個屬性的值是什麼。選擇有某個屬性的元素,並且要求這個元素的屬性的屬性值只能為...