詳解CSS中的選擇器

CSS選擇器的作用是指定、控制CSS要作用的HTML元素。要使用css對HTML頁面中的元素實現(xiàn)一對一，一對多或者多對一的控制，就需要用到CSS選擇器。HTML頁面中的元素就是通過CSS選擇器進行控制的。

下面來談?wù)凜SS選擇器的分類：

1. 通配符選擇器

CSS的通配符選擇器是一種比較特殊的選擇器，用“*”表示。

格式：*{property:value；...…}

含義：可以選中頁面中所有元素，對所有元素都生效用途：一般用于設(shè)置一些初始化的公共屬性

2. 元素選擇器

使用某個HTML元素名作為選擇器

格式：E{property:value；..…}

3. id選擇器

id是指我們可以在HTML標簽上設(shè)置一個id屬性值id屬性的特點是一個HTML文檔，只能有唯一的一個，不能重復(fù)

格式為：#id{property:value；...…}

含義：可以選中頁面中含有id屬性值的元素

4. 類選擇器

格式：class{property:value；....}

類選擇器中的類指的是class屬性

有相同class屬性值的都會被選中

class與id相比不具有唯一性

class屬性的值通常以字母開頭中間不能有空格

類選擇器可以和元素選擇器組合使用

例如：

6. 偽類選擇器

通過偽類來選中相應(yīng)元素進而添加樣式的選擇器

偽類名可以單獨使用，也可以和其它選擇器一起使用

一般偽類選擇器通常和元素名稱一起使用，用于選中某一元素的偽類元素

選擇符和冒號之間不能有空格

偽類選擇器最喜歡和超鏈接（a元素）一起使用

常見的偽類如下（順序很重要）：

：link 表示未被訪問的鏈接

：visited 表示已被訪問的鏈接

：hover 鼠標經(jīng)過鏈接上方時的狀態(tài)

：active鏈接被激活時的狀態(tài)

例如：華為官網(wǎng)

hover必須放在link和visited之后，不然樣式會被覆蓋。

active必須放在hover之后，不然樣式也會被覆蓋

有個口訣是love & hate,就是上述四個單詞的首單詞的順序。

7. 派生選擇器

派生選擇器包括：

7.1 后代選擇器

后代選擇器主要是用來選擇某個元素的后代元素

格式為：父元素子元素{property:value；...…}

注意點：父元素與子元素之間至少有一個空格，可以有很多空格

7.2 子元素選擇器

格式為：父元素>子元素{property:value；.…}

用來選擇作為某一個元素子元素的元素，與后代選擇器的區(qū)別是后代選擇器選的是所有子元素，而子元素原擇器只選第一級子元素

7.3 相鄰兄弟選擇器

格式為：父元素+子元素{property；value；.…}

用來選擇緊跟在一個元素之后的兄弟元素這兩個相鄰元素一定是同級元素

上述幾種選擇器的權(quán)重為：

通配符選擇器的權(quán)重：0

標簽選擇器的權(quán)重：1

類、偽類、屬性選擇器的權(quán)重：10

id選擇器的權(quán)重：100

組合選擇器：例如：標簽選擇器+id選擇器的權(quán)重是10

內(nèi)聯(lián)樣式選擇器的權(quán)重：1000

特殊處理：!important(強制使用）

CSS

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。