Css選擇器主要分為以下幾類
1、類選擇器：通過.classname 來選擇
例如
.color2 { color: rebeccapurple; }
同一個標籤可以通過多個類名來指定多個樣式，但是若其中有重疊部分，則按權重值重疊，若在同一權重級別中，如都是內部樣式表中的，則按照上下關係，下面的覆蓋上面的。
例如：
.classtest1 { font-size: 25px; color: blue; } .classtest2 { color: red; }
<p class="classtest1 classtest2">classtest</p>
則p標籤內容顯示紅色，樣式覆蓋只與樣式定義的順序有關，與指定的循序無關，如果將上述的p標籤中的class順序調換，則結果不會改變。例如
<p class="classtest2 classtest1">classtest</p>
顯示結果與上面的顯示結果一致。
2、Id選擇器通過#id來選擇
例如
#id1 { color: palegreen; }
<p id="id1">idTest</p>
在網頁中一般來說一個id對應一個元素，多個元素使用同一id值雖然不會報錯，並且可以使用同一樣式，但是用js進行操作時會出現問題。
3、萬用字元選擇器 *
萬用字元選擇器是選擇所有元素。
*{ background-color:yellow; }
4、標籤選擇器element
例如 為所有的div設定樣式：
div { color: blue; font-size: 20px }
5、偽類選擇器
（a）連線偽類選擇器 :link |:visited |:hover |:active
a:link {/* 連結的顏色 */ color: blue; } a:visited {/* 已訪問過的顏色 */ color: green; } a:hover {/* 滑鼠放上去的顏色 */ color: red; } a:active {/*點選瞬間的顏色 */ color: yellow; }
<a href="#">a連結</a>
連線偽類選擇器的順序儘量不要改變，因為hover放在link和visited後才有效，active再hover後才有效
(b)結構偽類選擇器
- :first-child 選取第一個元素
- :last-child 選取最後一個元素
- :nth-chlid(n) 選取第n個元素（n從1開始，n小於等於0時沒有匹配項）
- :nth-last-child
li:first-child { color: blue; } li:last-child { color: green; } li:nth-child(5) { color: red; } li:nth-last-child(5) { color: orange; } /* even、2n指定偶數項 odd、2n+1 奇數 */ li:nth-child(odd) { font-size: 25px; } li:nth-last-child(2n+1) { font-size: 35px; }
<ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul>
結果如下圖所示
上述的選擇器是將父元素中所有的元素進行排序來計算n的，所以當目標元素中穿插了其他元素，此種方法會出現問題。需要用到以下選擇器
- :first-of-type 同種型別元素的第一個
- :last-of-type 同種型別元素的最後一個
- :only-of-type 同種型別元素的單獨的一個
- :nth-of-type(n) 同種型別元素的第n個
- nth-last-of-type(n) 同種型別元素的倒數n個
span:nth-of-type(even) { color: blue; }
<div> <span>span1</span> <p>p1</p> <span>span2</span> <span>span3</span> <p>p1</p> <span>span4</span> <span>span5</span> <span>span6</span> </div>
這時用nth-of-type(n)沒有問題而使用 nth-child(n)會出現問題，可以自己試一下。
(c)目標選擇器 :target
只對當前目標有效
:target { color: blue; font-size: 30px; }
<a href="#div1">div1的連結</a> <a href="#div2">div2的連結</a> <div id="div1">div1Text</div> <div id="div2">div2Text</div>
點選div1的連結則div1處於活動狀態，此時div1的樣式改變
6、複合選擇器
(1)交集選擇器
交集選擇器是標籤選擇器+類選擇器（中間沒有空格！）。
p.pred { color: red; }
<span class="pred">spanText </span> <p class="pred">Ptext</p>
對於上面的例子中，只有p標籤改變了顏色
(2)並集選擇器 element,element
當多個標籤需要設定同種樣式時，使用並集選擇器,並集選擇器用逗號隔開，如：
div, span, .cla1{ color:pink; }
<div>divtext</div> <span>spantext</span> <h3 class="cla1">h3text</h3>
上面三中結果顯示樣式一致。
(3)後代選擇器 element element
後代選擇器用空格隔開，例如
div span { color: orange; }
指定div下面的span標籤是橙色
<div>divText</div> <span>SpanText</span> <div> <span>divspanText</span> </div>
只有 divspanText 文字變成橙色
(4)子元素選擇器 element>element
後代選擇器只要是滿足前一個標籤內的子孫元素都可以，而子元素選擇器只有子元素才可以。
div>p { color: hotpink }
<div> <p>divpText</p> <h1> <p>h1pText</p> </h1> </div>
只有divptext顏色改變，而h1ptext顏色不變。
(5) 下一級選擇器 element+element
選擇緊接著在上一個元素之後的元素
div+p { color: green; }
<div> <p>divpText</p> <h1> <p> h1pText</p> </h1> </div> <p>ptext</p>
只有ptext顏色改變。
(6)屬性選擇器 E[attr]
具體用法在下例給出
div[class=cla] { color: pink; } div[class^=div] { /*以div開頭的class*/ color: blue; font-size: 15px; } div[class$=div] { /*以div結尾的class*/ color: orange; font-size: 15px; } div[class*=Text] { /*包含Text的class*/ color: green; font-size: 15px; }
<div class="cla">claText</div> <div class="div1">div1Text</div> <div class="div2">div2Text</div> <div class="div3">div3Text</div> <div class="1div1Text">1div1Text</div> <div class="1div1Text">2div1Text</div> <div class="1div1Text">3div1Text</div> <div class="1div">1divText</div> <div class="2div">2divText</div> <div class="3div">3divText</div>
(7)偽元素選擇器
- ::first-letter 首字母
- ::first-line 首行
- ::selection 選中的元素
- ::brfore 在元素開始新增內容與content一起使用
- ::after 在元素結尾新增內容與content一起使用
p::first-letter { color: red; font-size: 30px; } p::first-line { color: palegreen; font-size: 25px; } p::selection { color: blue; font-size: 25px; } P::after { content: '-結尾' } p::before { content: '開頭：'; }
<p>層疊樣式表(英文全稱：Cascading Style Sheets) 是一種用來表現HTML（標準通用標記語言的一個應用） 或XML（標準通用標記語言的一個子集） 等檔案樣式的計算機語言。 CSS不僅可以靜態地修飾網頁， 還可以配合各種指令碼語言動態地對網頁各元素進行格式化。 </p>
偽元素與偽類選擇器的區別：
首先，在Css3標準中偽元素選擇器使用兩個冒號'::'，而偽類選擇器使用一個冒號‘ : ’。再就是如果不使用偽元素選擇器，想要達成相同的效果需要多新增元素才能實現，而不使用為例選擇器想要達成相同的效果需要增加一個類來實現。
例如對於上面的偽元素選擇器，想要改變第一個字母的顏色大小則需要增加一個標籤：
span { color: red; font-size: 30px; }
<p><span>層</span>疊樣式表(英文全稱：Cascading Style Sheets) 是一種用來表現HTML（標準通用標記語言的一個應用） 或XML（標準通用標記語言的一個子集） 等檔案樣式的計算機語言。 CSS不僅可以靜態地修飾網頁， 還可以配合各種指令碼語言動態地對網頁各元素進行格式化。 </p>
而不使用偽類選擇器想要改變第一個元素的樣式需要增加一個類，例如
.first { color: blue; }
<li class="first">li1</li>