一、CSS權重概念

CSS權重概念：指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。

二、權重的等級

2.1、權重的等級劃分

1、!important，加在樣式屬性值后，權重值為 10000

2、內聯樣式，如：style=""，權重值為1000

3、ID選擇器，如：#content，權重值為100

4、類，偽類和屬性選擇器，如： content、:hover 權重值為10

5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1

6、通用選擇器(*)、子選擇器(>)、相鄰選擇器(+)、同胞選擇器(~)、權重值為0

2.2、權重的計算實例一

CSS3權重

div{

color:red !important;

}

這是一個div元素

兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下面的行間樣式的權重值為1000，所以文字的最終顏色為red

2.3、權重的計算實例二

CSS3權重計算2

#content div.main_content h2{

color:red;

}

#content .main_content h2{

color:blue;

}

這是一個h2標題

第一條樣式的權重計算： 100+1+10+1，結果為112；

第二條樣式的權重計算： 100+10+1，結果為111；

h2 標題的最終顏色為red

最后提示：權重的和越大，樣式的優先級越高！

三、CSS3新增選擇器

3.1、E:nth-child(n)：匹配元素類型為E(標簽的名字，如：div,p,span等等)且是父元素的第n個子元素，如下的例子

E:nth-child(n)

CSS3新增選擇器

.list{

width: 200px;

height: 200px;

background-color: green;

}

.list div{

width: 100px;

height: 30px;

background-color: brown;

margin: 10px;

}

.list div:nth-child(2){

background-color: yellow;

}

2345

提示：.list div:nth-child(2) 其中的 2 代表 list 里面的第2個div

3.2、E:first-child：匹配元素類型為E且是父元素的第一個子元素

3.3、E:last-child：匹配元素類型為E且是父元素的最后一個子元素

3.4、E > F E元素下面第一層子集

E > F E元素下面第一層子集

CSS新增選擇器2

.list{

width: 200px;

height: 230px;

background-color: green;

}

.list div{

width: 100px;

height: 30px;

background-color: brown;

margin: 10px;

}

.list div>h1{

width: 50px;

height: 20px;

background-color: yellow;

font-size: 12px;

}

第1個h1

第2個h1

45

第3個h1

3.5、E + F 緊挨著的后面的兄弟元素

`E + F` 緊挨著的后面的兄弟元素

CSS新增選擇器3

.list{

width: 200px;

height: 330px;

background-color: green;

}

.list div{

width: 100px;

height: 30px;

background-color: brown;

margin: 10px;

}

.list h1{

width: 80px;

height: 20px;

font-size: 10px;

background-color: brown;

margin: 10px;

}

/* E + F 緊挨著的后面的兄弟元素 */

.list div+h1{

background-color: yellow;

}

1

第1個h1

第2個h1

2345

3.6、E ~ F E元素后面的兄弟元素

`E ~ F` E元素后面的兄弟元素

四、屬性選擇器

4.1、E[attr] 含有attr屬性的元素或者 E[attr='ok'] 含有attr屬性的元素且它的值為“ok”,如下

屬性選擇器1

div{

color: brown;

}

div[data-attr='ok']{

color:red;

}

這是1個div元素這是2個div元素

4.2、E[attr^='ok'] 含有attr屬性的元素且它的值的開頭含有“ok”

`E[attr^='ok']` 含有attr屬性的元素且它的值的開頭含有“ok”

屬性選擇器2

div{

color: brown;

}

div[data-attr^='ok']{

color:red;

}

這是1個div元素這是2個div元素

4.3、E[attr$='ok'] 含有attr屬性的元素且它的值的結尾含有“ok”

E[attr$='ok'] 含有attr屬性的元素且它的值的結尾含有“ok”

4.4、E[attr*='ok'] 含有attr屬性的元素且它的值中含有“ok”

E[attr*='ok'] 含有attr屬性的元素且它的值中含有“ok”

總結

以上是生活随笔為你收集整理的html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。