假設(shè)存在如下元素：

<p>who am i</p>

---

元素選擇器：

一個(gè)元素用同一種樣式：

p {color:green; }

多個(gè)元素用同一種樣式：

p,h1,h2{color:green; }

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

* {background:black; }

<div>內(nèi)所有元素的字體顏色為黑色：

div * {color:black; }

---

屬性選擇器：

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

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

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

p.greentea{ color:green; }

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

.greentea{ color:green; }

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

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

?

---

?id選擇器：

首先對(duì)p元素增加一個(gè)id:

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

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

#footer{color:red; }

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

P#footer{color:red; }

?

---

?選擇子孫：

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

div p {color:black; }

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

#footer p{color:black; }

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

#footer>p{color:black; }

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

#foot p blcokquote{color:blue; }

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

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

選擇有g(shù)reentea屬性的所有元素中 孩子元素帶blacktea 屬性的 ，并設(shè)置顏色為黑色，中間有一個(gè)空格：

.greentea .blacktea{color:black; }

---

?偽類：

元素 + 冒號(hào)，中間沒有空格。

未訪問狀態(tài)的鏈接：

a:link{color:green; }

已訪問的鏈接：

a:visited{color:red; }

鼠標(biāo)懸停在鏈接上：

a:hover{color:yellow; }

?焦點(diǎn)在鏈接上：

a:focus{color:blue; }

活動(dòng)狀態(tài)(用戶第一次單擊鏈接時(shí))：

a:active{color:black; }

?一般的順序?yàn)?#xff1a;link、visited、hover、focus、active。

?

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

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

?

?

?

?

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。