1.第一從符號上來區(qū)分后代選擇器:是用空格來分隔開來 例如<h1>一個(gè)<span>人</span>的戰(zhàn)爭</h1> 就是h1 span{}子代選擇器:用特殊符號> 例如 h1>span{}
2.第二從用法上區(qū)分后代選擇器html部分:<ul class="study"> <li>物理 <ul> <li>力學(xué)</li> <li>聲學(xué)</li> <li>電磁學(xué)</li> </ul> </li> <li>數(shù)學(xué) <ul> <li>微積分</li> <li>概率論</li> <li>博弈論</li> </ul> </li> </ul> css部分//使用子代選擇器的效果.study >li{ border:1px solid red;/*只給物理和數(shù)學(xué)加一個(gè)紅色方框*/}//使用后代選擇器的效果.study li{ border:1px solid red;/*給物理 力學(xué) 聲學(xué) 電磁學(xué) 和數(shù)學(xué) 微積分 概率論博弈論都加一個(gè)紅色方框*/}這說明子代是他是單傳只給物理和數(shù)學(xué)就斷子絕孫,后代是一代傳一代。
子代選擇器時(shí)效果圖:
后代選擇器時(shí)效果圖:
1.類選擇器(class選擇器)
基本使用:
.類選擇器{
屬性名: 屬性值;
...}
2.id選擇器
基本使用:
#id選擇器{
屬性名: 屬性值;
...
}
3. html元素選擇器
某個(gè)html元素{
屬性名: 屬性值;
...
}
4.通配符選擇器
該選擇器可以用到所有的html元素,但是其優(yōu)先權(quán)最低
*{
屬性名: 屬性值;
...
}
很古老的話題了
id=100
class=10
tag(標(biāo)簽)=1
按照這個(gè)規(guī)律去計(jì)算,比如
#qietu div{}
100+1 = 101
.qietu .box{}
10+10=20
可以得出第一個(gè)的權(quán)重要比第二個(gè)要高。另外關(guān)于權(quán)重的擴(kuò)展知識面,我推薦了解下BEM命名規(guī)則,這個(gè)觀念很好,可以從側(cè)面杜絕權(quán)重問題的產(chǎn)生,還有一個(gè)就是提高權(quán)重的方法 !important;
首字母必須是字母或者下劃線不能是數(shù)字和其他