CSS選擇器（CCS第三版）

dabai 發(fā)布于2019-08-29 17:02 / 3718人閱讀

摘要：元素選擇器針對元素的選擇器，用于尋找指定的元素。通用選擇器通用選擇器可設(shè)置全部的元素，由一個表示。使用表示偽類選擇器。偽類選擇器包含兩種狀態(tài)偽類和結(jié)構(gòu)偽類。層疊規(guī)定了選擇器的特殊性，將特殊性分為，，，四個登記，各等級特殊性逐漸降低即。

什么是選擇器？

CSS選擇器就是使樣式找到應(yīng)用對象。

簡單選擇器（Simple selectors）

在日常開發(fā)中，最常用的選擇器，也是最基本的選擇器。

元素選擇器（Type selector）

針對HTML元素的選擇器，用于尋找指定的HTML元素。

a { color: blue; }
p { color: black; }

通用選擇器（Universal Selector）

通用選擇器可設(shè)置全部的HTML元素，由一個 * 表示。

* { margin: 0; }

屬性選擇器（Attribute presence and value selectors）

類型	描述
[title]	選擇具有 title 屬性的所有元素。
[title="baidu"]	選擇具有 title 屬性且值為"baidu"的所有元素。
[title~="baidu"]	選擇 title 屬性值中出現(xiàn)的一個用空格分隔的"baidu"的元素。
[title^="baidu"]	選擇 title 屬性值以 "baidu" 開頭的所有元素。
[title$="baidu"]	選擇 title 屬性值以 "baidu" 結(jié)尾的所有元素。
*[title="baidu"]**	選擇 title 屬性值中包含字串"baidu"的所有元素。

以及
[title|="baidu"]：選擇 title 屬性值中等于 "baidu"或以 "baidu-"開頭的所有元素。

類選擇器（Class Selectors）

給HTML元素中指定了 class 的元素定義樣式。使用 . 表示。

.large-text { font-size: 18px; }

ID選擇器（ID Selectors）

給HTML元素中指定了 id 的元素定義樣式。使用 # 表示。

#main-content { margin: 8px; }

組選擇器（Groups of selectors）

將具有相同的樣式的元素，歸為組合來寫。使用 , 表示。

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

等于

h1, h2, h3 { font-family: sans-serif }

偽類選擇器（Pseudo-Classes）

偽類選擇器是需要根據(jù)文檔結(jié)構(gòu)之外的其他條件對元素應(yīng)用樣式。使用 : 表示偽類選擇器。

a:hover{ color: red }

偽類選擇器包含兩種：狀態(tài)偽類和結(jié)構(gòu)偽類。

狀態(tài)偽類

基于HTML元素當(dāng)前狀態(tài)進行選擇的。在與用戶的交互過程中元素的狀態(tài)是動態(tài)變化的，因此該元素會根據(jù)其狀態(tài)呈現(xiàn)不同的樣式。當(dāng)元素處于某狀態(tài)時會呈現(xiàn)該樣式，而進入另一狀態(tài)后，該樣式也會失去。

屬性	描述	css版本
:link	匹配未被訪問的鏈接的元素。（標(biāo)簽）	1
:visited	匹配已被訪問的鏈接的元素。（標(biāo)簽）	1
:active	匹配被激活的元素。（如鼠標(biāo)點擊的瞬間）	1
:hover	當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式。	2
:focus	匹配擁有鍵盤輸入焦點的元素。	2
:target	匹配相關(guān)URL指向的E元素。	3
:checked	匹配處于選中狀態(tài)的元素添加樣式。（用于input type為radio與checkbox時）	3
:enabled	向處于可用狀態(tài)的元素添加樣式。	3
:disabled	向處于禁用狀態(tài)的元素樣式。	3
:indeterminate	表示狀態(tài)不確定的表單元素。（用于input type為radio與checkbox及時）	3

結(jié)構(gòu)偽類

結(jié)構(gòu)性偽類是css3新增選擇器，利用dom樹進行元素過濾，通過文檔結(jié)構(gòu)的互相關(guān)系來匹配元素，能夠減少class和id屬性的定義，使文檔結(jié)構(gòu)更簡潔。

屬性	描述	css版本
:not(s)	匹配不含有s選擇符的元素。	3
:first-child	匹配父元素的第一個子元素E。	2
:last-child	匹配父元素的最后一個子元素E。	3
:only-child	匹配父元素僅有的一個子元素E。	3
:nth-child(n)	匹配父元素的第n個子元素E。	3
:nth-last-child(n)	匹配父元素的倒數(shù)第n個子元素E。	3
:first-of-type	匹配同類型中的第一個同級兄弟元素E。	3
:last-of-type	匹配同類型中的最后一個同級兄弟元素E。	3
:only-of-type	匹配同類型中的唯一的一個同級兄弟元素E。	3
:nth-of-type(n)	匹配同類型中的第n個同級兄弟元素E。	3
:nth-last-of-type(n)	匹配同類型中的倒數(shù)第n個同級兄弟元素E。	3
:empty	匹配沒有任何子元素（包括text節(jié)點）的元素。	3
:root	匹配文檔根元素。
在HTML中，根元素始終是。	3

其他偽類及相關(guān)信息請參考：
偽類
各偽類實現(xiàn)（待完成...）

偽元素選擇器（Pseudo-elements）

偽元素是對元素中的特定內(nèi)容進行操作，而不是描述狀態(tài)。它的操作層次比偽類更深一層，因此動態(tài)性比偽類低很多。實際上，偽元素就是選取某些元素前面或后面這種普通選擇器無法完成的工作。控制的內(nèi)容和元素是相同的，但它本身是基于元素的抽象，并不存在于文檔結(jié)構(gòu)中！
使用 :: 表示偽元素選擇器。

屬性	描述	css版本
::first-letter	向文本的第一個字母添加特殊樣式。	1
::first-line	向文本的首行添加特殊樣式。	1
::before	在元素之前添加內(nèi)容。	2
::after	在元素之后添加內(nèi)容。	2

::before 和 ::after

::before 和 ::after 被引入CSS中，最核心的目的，還是為了實現(xiàn)語義化。

使用::before 和 ::after 布局的閉合問題

.clear::after {
    content: "";
    display: block;
    clear: both;    
}

組合選擇器 后代選擇器（Descendant combinator）

由于HTML元素之間具有層次結(jié)構(gòu)關(guān)系，因此在一些情況下，我們需要根據(jù)對應(yīng)的HTML結(jié)構(gòu)尋找指定的HTML元素。

p span{ color: #999; }
ul li { font-size:14px; }
#main-content div { color: black; }

子選擇器（Child combinators）

選擇元素的直接子元素。使用 > 表示。

body > div {
    background: #c0c0c0;
    height: 100px;
    width: 100%;
}

body > div > div {
    background: red;
}

相鄰選擇器（Next-sibling combinator）

根據(jù)一個元素與另一個元素的相鄰關(guān)系對它應(yīng)用樣式。使用 + 表示。

 /* 相鄰元素選擇后面的元素進行樣式設(shè)置 */
?li + li {
    border-left: 1px solid #000000;
}

一般兄弟選擇器（Subsequent-sibling combinator）

根據(jù)一個元素在另外一個元素后面且兩個元素都屬于一個父元素，對后面選擇的元素進行樣式設(shè)置。使用 ~ 表示。

 /* 選擇后面的元素進行樣式設(shè)置 */
?p ~ span {
  color: red;
}

選擇器層疊和特殊性

當(dāng)你隨機打開一個頁面，查看源代碼，你會發(fā)現(xiàn)，同一個元素，不止有一個CSS選擇器及對應(yīng)的樣式。而一個元素只能應(yīng)用一個樣式，那么一堆樣式中究竟是應(yīng)用哪一個呢？這就涉及到CSS的層疊規(guī)則了。
CSS層疊規(guī)定了選擇器的特殊性，將特殊性分為a，b，c，d四個登記，各等級特殊性逐漸降低（即a>b>c>d）。通過選擇器特殊性的比較，實現(xiàn)樣式選擇。
計算規(guī)則如下：

在 style 中寫的內(nèi)聯(lián)樣式或加 !important 的樣式特殊性為 1，0，0，0 （ !important ?> 內(nèi)聯(lián)樣式）

每個ID選擇器的特殊性為 0，1，0，0

每個類、偽類或者屬性選擇器的特殊性為 0，0，1，0

每個元素或偽元素選擇器貢獻特殊性為 0，0，0，1

組合選擇器和通配符的對特殊性沒有貢獻

用style屬性編寫的規(guī)則總是比其他任何規(guī)則特殊；具有ID選擇器的規(guī)則比沒有ID選擇器的規(guī)則特殊；具有類選擇器的規(guī)則比只有類型選擇器的規(guī)則特殊；如果兩個規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先。

參考

CSS Selector
Selectors Level 3 -- W3C Working Draft

GPU云服務(wù)器云服務(wù)器 css選擇器基礎(chǔ)選擇器css 第三版 webrtc第三版

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114061.html

發(fā)表評論

登陸后可評論

0條評論

dabai

男|高級講師

我要關(guān)注我要私信

TA的文章

啟明云端分享|Sigmastar SSD201|IDO-SOM2D01核心板

閱讀 3431·2021-10-14 09:42
W3Space：$50/月/AMD Ryzen 5 3600/64GB/2*500GB NVMe硬盤

閱讀 2717·2021-09-08 10:44
DogYun本站定制經(jīng)典云,香港VPS年付168元

閱讀 1299·2021-09-02 10:18
umami：一款簡單、易用、自行部署的網(wǎng)站統(tǒng)計程序

閱讀 3599·2021-08-30 09:43
LetBox：美國洛杉磯/新澤西AMD大硬盤VPS，10TB流量，充值返余額，最低3.3美元兩個月

閱讀 2793·2021-07-29 13:49
CSS選擇器（CCS第三版）

閱讀 3719·2019-08-29 17:02
Codepen 每日精選（2018-4-25）

閱讀 1576·2019-08-29 15:09
css3 checked屬性寫導(dǎo)航目錄

閱讀 1034·2019-08-29 11:01

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS選擇器（CCS第三版）

相關(guān)文章