成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 選擇器，一篇就夠了

Songlcy / 891人閱讀

摘要：摘自簡介選擇器是規(guī)則的一部分且位于聲明塊前。選擇器選擇器由哈希磅符號組成，后面是給定元素的名稱。通用選擇器通用選擇是最終的王牌。子選擇器允許您選擇一個元素，該元素是另一個元素的直接子元素。該選擇器僅選擇屬性被賦值為的所有元素。

摘自 MDN web docs
簡介

選擇器是 CSS 規(guī)則的一部分且位于 CSS 聲明塊前。

選擇器可以被分為以下類別：

簡單選擇器（Simple selectors）：通過元素類型、class 或 id 匹配一個或多個元素。

屬性選擇器（Attribute selectors）：通過 屬性 / 屬性值 匹配一個或多個元素。

偽類（Pseudo-classes）：匹配處于確定狀態(tài)的一個或多個元素，比如被鼠標(biāo)指針懸停的元素，或當(dāng)前被選中或未選中的復(fù)選框，或元素是 DOM 樹中一父節(jié)點的第一個子節(jié)點。

偽元素（Pseudo-elements）:匹配處于相關(guān)的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內(nèi)容。

組合器（Combinators）：這里不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法。例如，你可以只選擇 divs 的直系子節(jié)點的段落，或者直接跟在 headings 后面的段落。

多用選擇器（Multiple selectors）：這些也不是多帶帶的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個 CSS 規(guī)則下面， 以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素。

簡單選擇器 類型選擇器（又名：元素選擇器）

此選擇器只是一個選擇器名和指定的HTML元素名的不區(qū)分大小寫的匹配。這是選擇所有指定類型的最簡單方式。

類選擇器（Class selectors）

類選擇器由一個點“.”以及類后面的類名組成。類名是在HTML class文檔元素屬性中沒有空格的任何值。由你自己選擇一個名字。同樣值得一提的是，文檔中的多個元素可以具有相同的類名，而單個元素可以有多個類名(以空格分開多個類名的形式書寫)。

ID 選擇器

ID選擇器由哈希/磅符號 (#)組成，后面是給定元素的ID名稱。 任何元素都可以使用id屬性設(shè)置唯一的ID名稱。 由你自己選擇的ID是什么。 這是選擇單個元素的最有效的方式。

重要提示：一個ID名稱必須在文件中是唯一的。關(guān)于重復(fù)ID的行為是不可預(yù)測的，比如在一些瀏覽器只是第一個實例計算，其余的將被忽略。
通用選擇器（Universal selector）

通用選擇（*）是最終的王牌。它允許選擇在一個頁面中的所有元素。由于給每個元素應(yīng)用同樣的規(guī)則幾乎沒有什么實際價值，更常見的做法是與其他選擇器結(jié)合使用。

重要提示：使用通用選擇時小心。因為它適用于所有的元素，在大型網(wǎng)頁利用它可以對性能有明顯的影響：網(wǎng)頁可以顯示比預(yù)期要慢。不會有太多的情況下，您想使用此選擇。
組合器（Combinators）

在CSS中，組合器允許您將多個選擇器組合在一起，這允許您在其他元素中選擇元素，或者與其他元素相鄰。四種可用的類型是：

后代選擇器——（空格鍵）——允許您選擇嵌套在另一個元素中的某個元素（不一定是直接的后代;例如，它可以是一個孫子）。

子選擇器—— > ——允許您選擇一個元素，該元素是另一個元素的直接子元素。

相鄰兄弟選擇器—— + ——允許您選擇一個元素，它是另一個元素的直接兄弟元素(也就是說，在它的旁邊，在層次結(jié)構(gòu)的同一層)。

通用兄弟選擇器—— ~ — —允許您選擇其他元素的兄弟元素(例如，在層次結(jié)構(gòu)中的相同級別，但不一定就在它的旁邊)。

Combinators Select
A,B 匹配滿足A（和/或）B的任意元素.
A B 匹配任意元素，滿足條件：B是A的后代結(jié)點（B是A的子節(jié)點，或者A的子節(jié)點的子節(jié)點）
A > B 匹配任意元素，滿足條件：B是A的直接子節(jié)點
A + B 匹配任意元素，滿足條件：B是A的下一個兄弟節(jié)點（AB有相同的父結(jié)點，并且B緊跟在A的后面）
A ~ B 匹配任意元素，滿足條件：B是A之后的兄弟節(jié)點中的任意一個（AB有相同的父節(jié)點，B在A之后，但不一定是緊挨著A） 
注：相鄰兄弟選擇器和通用兄弟選擇器只會“向后”選擇，DOM結(jié)構(gòu)靠前的兄弟元素不在選擇范圍內(nèi)。

這里有一個簡單的例子來展示這些工作是如何工作的：


  
Heading 1

  
Paragraph 1

  
Paragraph 2

  

    
Heading 2

    
Paragraph 3

    
Paragraph 4

  


section p {
  color: blue;
}

section > p {
  background-color: yellow;
}

h2 + p {
  text-transform: uppercase;
}

h2 ~ p {
  border: 1px dashed black;
}

CSS樣式的HTML如下所示：

選擇器是這樣工作的：

section p選擇了所有的

元素——前兩個

都是

元素的直接子元素，而后面的兩個

元素是

元素的孫子元素(它們在
里面)。因此，所有的段落文本都是藍(lán)色的。

section > p 只選擇前兩個

元素，這兩個元素是

元素的直接子元素（但后兩個

元素不是，它們不是直接的子元素）。所以只有前兩段有黃色的背景色。

h2 + p 只選擇在相同層次結(jié)構(gòu)的

元素之后直接相連的

元素—— 在本例中是第一和第三段。因此，這些文本都是大寫的。

h2 ~ p 選擇任何在相同的層級上（還有之后的）

元素的

元素 ——在這種情況下，所有的段落符合此條件。因此，所有的這些都有一個虛線的邊界。

屬性選擇器

屬性選擇器是一種特殊類型的選擇器，它根據(jù)元素的 屬性和屬性值來匹配元素。它們的通用語法由方括號([]) 組成，其中包含屬性名稱，后跟可選條件以匹配屬性的值。 屬性選擇器可以根據(jù)其匹配屬性值的方式分為兩類： 存在和值屬性選擇器 和 子串值屬性選擇器。

存在和值（Presence and value）屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值：

[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。

[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。

[attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，比如位于被空格分隔的多個類（class）中的一個類。

子串值（Substring value）屬性選擇器

這種情況的屬性選擇器也被稱為“偽正則選擇器”，因為它們提供類似 regular expression 的靈活匹配方式（但請注意，這些選擇器并不是真正的正則表達(dá)式）：

[attr|=val] : 選擇attr屬性的值以val（包括val）或val-開頭的元素（-用來處理語言編碼）。

[attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。

[attr$=val] : 選擇attr屬性的值以val結(jié)尾（包括val）的元素。

[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。

偽類和偽元素 偽類（Pseudo-class）

一個 CSS 偽類（pseudo-class） 是一個以冒號(:)作為前綴的關(guān)鍵字，當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時，你可以往元素的選擇器后面加上對應(yīng)的偽類（pseudo-class）。你可能希望某個元素在處于某種狀態(tài)下呈現(xiàn)另一種樣式，例如當(dāng)鼠標(biāo)懸停在元素上面時，或者當(dāng)一個 checkbox 被禁用或被勾選時，又或者當(dāng)一個元素是它在 DOM 樹中父元素的第一個孩子元素時。

:active
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

偽元素

偽元素（Pseudo-element）跟偽類很像，但它們又有不同的地方。它們都是關(guān)鍵字 —— 但這次偽元素前綴是兩個冒號 (::) —— 同樣是添加到選擇器后面達(dá)到指定某個元素的某個部分。

::after
::before
::first-letter
::first-line
::selection
::backdrop

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115738.html

相關(guān)文章

  • 你真的完全了解Java動態(tài)代理嗎？看這篇就夠了

    摘要：動態(tài)地代理，可以猜測一下它的含義，在運行時動態(tài)地對某些東西代理，代理它做了其他事情。所以動態(tài)代理的內(nèi)容重點就是這個。所以下一篇我們來細(xì)致了解下的到底是怎么使用動態(tài)代理的。 之前講了《零基礎(chǔ)帶你看Spring源碼——IOC控制反轉(zhuǎn)》，本來打算下一篇講講Srping的AOP的，但是其中會涉及到Java的動態(tài)代理，所以先單獨一篇來了解下Java的動態(tài)代理到底是什么，Java是怎么實現(xiàn)它的。 ...

    haitiancoder 評論0 收藏0

  • WorkManager從入門到實踐，有這一篇就夠了

    摘要：前言上一次我們對的應(yīng)用進(jìn)行了一次全面的分析，這一次我們來聊聊。 showImg(https://segmentfault.com/img/remote/1460000020077803?w=1280&h=853); 前言 上一次我們對Paging的應(yīng)用進(jìn)行了一次全面的分析，這一次我們來聊聊WorkManager。 如果你對Paging還未了解，推薦閱讀這篇文章： Paging在Recy...

    bingchen 評論0 收藏0

  • SpringBoot中并發(fā)定時任務(wù)的實現(xiàn)、動態(tài)定時任務(wù)的實現(xiàn)（看這一篇就夠了）

    摘要：也是自帶的一個基于線程池設(shè)計的定時任務(wù)類。其每個調(diào)度任務(wù)都會分配到線程池中的一個線程執(zhí)行，所以其任務(wù)是并發(fā)執(zhí)行的，互不影響。 原創(chuàng)不易，如需轉(zhuǎn)載，請注明出處https://www.cnblogs.com/baixianlong/p/10659045.html，否則將追究法律責(zé)任?。。?一、在JAVA開發(fā)領(lǐng)域，目前可以通過以下幾種方式進(jìn)行定時任務(wù) 1、單機(jī)部署模式 Timer：jdk中...

    BWrong 評論0 收藏0

  • Java3y文章目錄導(dǎo)航

    摘要：前言由于寫的文章已經(jīng)是有點多了，為了自己和大家的檢索方便，于是我就做了這么一個博客導(dǎo)航。 前言 由于寫的文章已經(jīng)是有點多了，為了自己和大家的檢索方便，于是我就做了這么一個博客導(dǎo)航。 由于更新比較頻繁，因此隔一段時間才會更新目錄導(dǎo)航哦～想要獲取最新原創(chuàng)的技術(shù)文章歡迎關(guān)注我的公眾號：Java3y Java3y文章目錄導(dǎo)航 Java基礎(chǔ) 泛型就這么簡單 注解就這么簡單 Druid數(shù)據(jù)庫連接池...

    KevinYan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<