假設存在如下元素：

<p>who am i</p>

---

元素選擇器：

一個元素用同一種樣式：

p {color:green; }

多個元素用同一種樣式：

p,h1,h2{color:green; }

所有元素的背景色為黑色：

* {background:black; }

<div>內所有元素的字體顏色為黑色：

div * {color:black; }

---

屬性選擇器：

將一個元素加入一個類，只需要增加屬性“class”，并提供一個類名。

<p class="greentea"> who am i<p/>

在CSS中編寫屬性屬性選擇器，以下代碼會造成所有包含“greentea”屬性的p元素字體變綠：

p.greentea{ color:green; }

如果希望“greentea”類中所有的元素都有同一種樣式：

.greentea{ color:green; }

如果要對所有<blockquote>元素做同樣處理，可以這樣：

blockquote.greentea , p.greentea {color:green; }

?

---

?id選擇器：

首先對p元素增加一個id:

<p id="footer">who am i</p>

選擇id為“footer”的任意元素，id是唯一的：

#footer{color:red; }

選擇一個id為“footer”的<p>元素：

P#footer{color:red; }

?

---

?選擇子孫：

選擇<div>中的所有子孫<p>元素，<div>是父元素，<p>是子元素，中間有一個空格符。

div p {color:black; }

選擇id為“footer”的元素的所有子孫?<p>元素，footer為父元素id，<p>是子元素，中間有一個空格符。

#footer p{color:black; }

?選擇id為“footer”的元素的直接孩子<p>元素：

#footer>p{color:black; }

?選擇id為“footer”的元素的孩子<p>元素的孩子<blockquote>元素：

#foot p blcokquote{color:blue; }

?假設有如下兩個屬性：greentea和blacktea，blacktea屬性所在元素 為 greentea屬性所在元素的孩子：

<p class="greentea">who am i,<em class="blacktea">do you know</em> </p>

選擇有greentea屬性的所有元素中 孩子元素帶blacktea 屬性的 ，并設置顏色為黑色，中間有一個空格：

.greentea .blacktea{color:black; }

---

?偽類：

元素 + 冒號，中間沒有空格。

未訪問狀態的鏈接：

a:link{color:green; }

已訪問的鏈接：

a:visited{color:red; }

鼠標懸停在鏈接上：

a:hover{color:yellow; }

?焦點在鏈接上：

a:focus{color:blue; }

活動狀態(用戶第一次單擊鏈接時)：

a:active{color:black; }

?一般的順序為：link、visited、hover、focus、active。

?

在id為footer的元素中所有未訪問的<a>元素指定顏色為青綠色：

#footer a:link{color:#007e7e; }

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的浅析CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

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