html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一、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
23453.6、E ~ F E元素后面的兄弟元素
`E ~ F` E元素后面的兄弟元素
四、屬性選擇器
4.1、E[attr] 含有attr屬性的元素或者 E[attr='ok'] 含有attr屬性的元素且它的值為“ok”,如下
屬性選擇器1div{
color: brown;
}
div[data-attr='ok']{
color:red;
}
這是1個div元素這是2個div元素4.2、E[attr^='ok'] 含有attr屬性的元素且它的值的開頭含有“ok”
`E[attr^='ok']` 含有attr屬性的元素且它的值的開頭含有“ok”
屬性選擇器2div{
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新增选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html显示数据库图片django,dj
- 下一篇： 《强酒》第四句是什么