一般的選擇器
標簽選擇器
以html標簽的名稱作為標示符如
p {color:red;}
<p>這是一段文字</p>
顯示結果段落文字顯示為紅色
ID、類 選擇器
使用html標簽的class值
p {color:red;}
p.blue{color:blue;}
<p>這是一段紅色文字</p>
<p class="blue">這是一段藍色文字</p>
屬性選擇器
[attr^=val] ： 以val開頭
[attr$=val] ： 以val結尾
[attr*=val] ： 包含val
/*data-role以h開始的div*/
div[data-role^=h]{color:red;}
/*data-role以content結尾的div*/
div[data-role$=content]{color:blue;}
/*data-role包含foot的div*/
div[data-role^=header]{color:yellow;}
<div data-role="h-header">header</div>
<div data-role="c-content">content</div>
<div data-role="f-footer">header</div>
偽類、偽元素選擇器
以‘:’、’::’ 作為開始
:first-child - 選擇子元素的第一項 ；
:last-child - 選擇子元素的最後項；
:nth-child(n) – 選擇第n個子元素
/*選中子元素只有一個的ul子元素*/
ul.test_only :only-child {background-color: red;}
/*第一個子元素*/
li:first-child {color: red;}
/*最後一個子元素*/
li:last-child {color: orange;}
/*偶數項子元素*/
li:nth-child(2n){background-color: #ccc;}
/*奇數項子元素*/
li:nth-child(2n+1){background-color: yellow;}
<ul class="test_only">
<li>only li</li>
</ul>
<ul class="test_only">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
:first-of-type - 選擇子元素為某類型的的第一個子元素，p:first-of-type 選擇子元素為p的第一個元素
:last-of-type – 選擇子元素為某類型的的最後一個子元素
:nth-of-type(n) - 選擇子元素為某類型的第n子元素
/*類型為dt的第一個子元素*/
dt:first-of-type {background-color: #ccc;}
/*類型為dt的最後一個子元素*/
dt:last-of-type {background-color: red;}
/*類型為dd的第三個子元素*/
dd:nth-of-type(3) {background-color: orange;}
/*類型為dd的倒數第三個子元素*/
dd:nth-last-of-type(3) {background-color: yellow;}
<dl>
<dt>作者</dt>
<dd>Leon</dd>
<dt>出版社</dt>
<dd>人民出版社</dd>
<dt>出版時間</dt>
<dd>2014-01-02</dd>
</dl>
偽元素選擇器:
/**
* 偽元素選擇器
* ::first-letter 選擇第一個字;
* ::first-line 選擇第一行;
* ::before{content:"";} 在選擇元素前面加入content內容
* ::after{content:"";}; 在選擇元素後面加入content內容
* ::selection 被選中的內容，如鼠標選擇的內容
*/
/*第一個字變大*/
div.oth-class p::first-letter{font-size:25px;font-weight:bold;}
div.oth-class p::first-line{color:red;}
/*前面加上before，after和before添加的內容無法被鼠標選中*/
div.oth-class p::before{content:"before";}
div.oth-class p::after{content:"after";}
/*被鼠標選擇內容*/
div.oth-class p::selection{background-color: #ccc;color:orange;}
<div class="other">
<p></p>
<p>我是段落</p>
<div><span>我是div，我有一個span</span></div>
<div>我是div，沒有span</div>
</div>
<div class="oth-class" style="border:1px solid red;">
<p>這是一段文字，<br>這段文字有兩行.</p>
</div>
3. 選擇器的優先級
CSS對選擇器的優先級有一個計算方法
a=行內樣式
b=ID選擇器的數量
c=類、偽類和屬性選擇器的數量
d=標簽選擇器和偽元素選擇器的數量
a,b,c,c的權重依次為1000,100,10,1
最終的權重值value=a*1000+b*100+c*10+d ,
CSS層疊：
相同屬性 - 優先級高覆蓋優先級低，優先級相同後面覆蓋簽名的。
不同屬性 - 疊加在一起。
明確指定的屬性有限與父元素繼承來的屬性。