CSS選擇器

CSS中使用選擇器來指定網頁上我們想要格式化的HTML元素。

1 選擇器列表

如果有多個使用相同樣式的CSS選擇器，那麼這些選擇器可以被編排為一個列表。

h1 {
  color: blue;
}< br>
.special {
  color: blue;
}

以上兩個標籤使用了同樣的樣式可以寫成兩個分開的規則，也可以則合起來，在他們之間加上逗號即可組成為一個選擇器列表。

h1, .special {
  color: blue;
}

注意：在使用選擇器列表時，如果任何一個選擇器無效（存在語法錯誤）那麼整條規則都會被疏略。

2 選擇器種類

2.1標籤、類和ID 選擇器

類型選擇器有時也叫做“標籤名選擇器”或者是”元素選擇器“，因為它在文檔中選擇了一個HTML 標籤/元素的緣故。

類選擇器以一個句點（.）開頭，會選擇文檔中應用了這個類的所有元素。

ID 選擇器開頭為#而非句點，和類選擇器是同種用法。

2.1.1 全局選擇器

全局選擇器，是由一個星號（*）代指的，它選中了文檔中的所有內容（或者是父元素中的所有內容。

更易讀的全局選擇器， 例如：

如果我想選中任何<article>元素的第一子元素，不論它是什麼元素，都給它加粗。

article :first-child {
}
< /code>

這看起來可能會和為元素選擇器混淆

article:first-child
為了避免這種混淆，我們可以向:first-child選擇器加入全局選擇器，這樣選擇器所做的事情很容易就能看懂。選擇器正選中<article>元素的任何第一子元素：
article *:first-child {
}
 
2.2 屬性選擇器
選擇器
示例
描述
[attr]
a[title]
匹配帶有一個名為attr的屬性的元素——方括號裡的值。 
[attr=value]
a[href='https://example.com'] 
匹配帶有一個名為attr的屬性的元素，其值正為value——引號中的字符串。 
[attr~=value]
p[class~='special'] 
匹配帶有一個名為attr的屬性的元素，其值正為value，或者匹配帶有一個attr屬性的元素，其值有一個或者更多，至少有一個和value匹配。注意，在一列中的好幾個值，是用空格隔開的。 
`[attr
=value]`
`div[lang
2.2.1 字符串匹配選擇器
選擇器
示例
描述
[attr^=value]
li[class^='box-']
匹配帶有一個名為attr的屬性的元素，其值開頭為value子字符串。 
[attr$=value]
li[class$='-box']
匹配帶有一個名為attr的屬性的元素，其值結尾為value子字符串
 
[attr*=value]
li[class*='box']
匹配帶有一個名為attr的屬性的元素，其值的字符串中的任何地方，至少出現了一次value子字符串。 
如果你想在大小寫不敏感的情況下，匹配屬性值的話，你可以在閉合括號之前，使用i值。這個標記告訴瀏覽器，要以大小寫不敏感的方式匹配 ASCII 字符。沒有了這個標記的話，值會按照文檔語言對大小寫的處理方式進行匹配，在HTML中是大小寫敏感的。
li[class^='a' i] {
    color: red;
}

 <h1>Case-insensitivity</h1>
< ul>
    <li class='a'> ;Item 1</li>
    <li class='A'>Item 2</li>
    <li class='Ab'>Item 3</li>< /span>
</ul>
< span >2.3 偽類偽元素選擇器
 2.3.1 偽類選擇器
它用於選擇處於特定狀態的元素，比如當它們是這一類型的第一個元素時，或者是當鼠標指針懸浮在元素上面的時候。偽元素開頭為雙單冒號:。
應用案例：
比如要讓某個文章的第一段加粗，字體變大。
.first {
    font-size: 120 %;
    font-weight: bold;
} 
< span ><article>
    <p class='first'>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</ p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
 </article>
使用以上樣式的確可以實現需求，但是此時文章開頭又加入了一段話，就需要將class='first'改到第一段，比較麻煩。此時就可以使用偽類選擇器class='first'。
article p:first-child { 
    font-size: 120%;
    font-weight: bold;
}   
<article>
    < span ><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</< span >p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
< ;/article>
這樣始終能夠保持article下面第一個標籤樣式被加粗字體變大。
此外還有其他的幾個偽類選擇器
:last-child 父元素的最後一個元素。 
:only-child 匹配沒有任何兄弟元素的元素。等效的選擇器還可以寫成:first-child:last-child或者:nth-child(1):nth-last-child(1),當然，前者的權重會低一點。 
:invalid 表示任意內容未通過驗證的input或其他form 元素，這個偽類對於突出顯示用戶的字段錯誤非常有用。 
用戶行為偽類也叫做動態偽類。表現形式為像是一個類在用戶和元素交互的時候加到了元素上一樣。
:hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
:focus——只会在用户使用键盘控制，选定元素的时候激活。
常见的伪类类型
选择器
描述
:active
在用户激活（例如点击）元素的时候匹配。
:any-link
匹配一个链接的:link和:visited状态。
:blank
匹配空输入值的``元素。
:checked
匹配处于选中状态的单选或者复选框。
:current 
匹配正在展示的元素，或者其上级元素。
:default
匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir
基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。
:disabled
匹配处于关闭状态的用户界面元素
:empty
匹配除了可能存在的空格外，没有子元素的元素。
:enabled
匹配处于开启状态的用户界面元素。
:first
匹配分页媒体的第一页。
:first-child
匹配兄弟元素中的第一个元素。
:first-of-type
匹配兄弟元素中第一个某种类型的元素。
:focus
当一个元素有焦点的时候匹配。
:focus-visible
当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within
匹配有焦点的元素，以及子代元素有焦点的元素。
:future 
匹配当前元素之后的元素。
:hover
当用户悬浮到一个元素之上的时候匹配。
:indeterminate
匹配未定态值的 UI 元素，通常为复选框。
:in-range
用一个区间匹配元素，当值处于区间之内时匹配。
:invalid
匹配诸如<input>的位于不可用状态的元素。
:lang
基于语言（HTMLlang属性的值）匹配元素。
:last-child
匹配兄弟元素中最末的那个元素。
:last-of-type
匹配兄弟元素中最后一个某种类型的元素。
:left
在分页媒体 中，匹配左手边的页。
:link
匹配未曾访问的链接。
:local-link
匹配指向和当前文档同一网站页面的链接。
:is()
匹配传入的选择器列表中的任何选择器。
:not
匹配作为值传入自身的选择器未匹配的物件。
:nth-child
匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-of-type
匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-last-child
匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type
匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:only-child
匹配没有兄弟元素的元素。
:only-of-type
匹配兄弟元素中某类型仅有的元素。
:optional
匹配不是必填的 form 元素。
:out-of-range
按区间匹配元素，当值不在区间内的的时候匹配。
:past 
匹配当前元素之前的元素。
:placeholder-shown
匹配显示占位文字的 input 元素。
:playing 
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused 
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only
匹配用户不可更改的元素。
:read-write
匹配用户可更改的元素。
:required
匹配必填的 form 元素。
:right
在分页媒体 中，匹配右手边的页。
:root
匹配文档的根元素。
:scope
匹配任何为参考点元素的的元素。
:valid
匹配诸如<input>元素的处于可用状态的元素。
:target
匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
:visited
匹配已访问链接。
2.3.2 伪元素选择器
伪元素和伪类的形式差不多，但是是表现得像往标记文本中加入全新的 HTML 元素一样，伪元素开头为双冒号::。
應用案例：
比如要讓某個文章的第一行字體加粗，變大。
如果用span來實現，當無法知道屏幕的大小，或者字體大小的時候就無法準確選擇第一行，所以偽元素選擇器就可以完全很好的實現這一樣式。
article p::first-line {
    font-size: 120%;
    font-weight: bold;
} 
<article>
 <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</ p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
 </article>
特別的偽元素::before 和::after和cotent屬性一起使用，使用CSS將內容插入到你的文檔中。
.box::before {
    content< /span>: 'This should show before the other content.'
}   
<p class='box'>Content in the box in my HTML page.</p>
這些偽元素並不會在Web 瀏覽器上經常這麼做，更推薦的用法是插入一些圖標，作為一個視覺性的提示，或者插入一個空字符串，並設計他的樣式，使其成為一個視覺的性的提示。
常見的偽元素類型
 
選擇器
描述
::after 
匹配出現在原有元素的實際內容之後的一個可樣式化元素。 
::before
匹配出現在原有元素的實際內容之前的一個可樣式化元素。 
::first-letter
匹配元素的第一個字母。 
::first-line
匹配包含此偽元素的元素的第一行。 
::grammar-error
匹配文檔中包含了瀏覽器標記的語法錯誤的那部分。 
::selection
匹配文檔中被選擇的那部分。 
::spelling-error
匹配文檔中包含了瀏覽器標記的拼寫錯誤的那部分。 
2.4關係選擇器
關係選擇器都是針對於第二個元素。
2.4.1 後代選擇器
使用空格隔開（“ ”），組合兩個選擇器，比如第二個選擇器的元素被選擇，且其餘的相同元素都和第二個選擇器有同一個祖先的都會被選擇。 （不管多少代都會被選擇）
.box p {
    color: red;
}  
<div  class='box'>
    <p>Text in .box</p>
    <div class= 'box2'>
        <p>Text in .box2</p>
    </div>
    <p>Text in .box</p>
</div> 
<p>Text not in .box</p>
2.4.2 子代關係選擇器
 
子代關係選擇器是個大於號（>），只會在選擇器選中直接子元素的時候匹配。 （只選擇第一代的所有相同元素）
2.4.3 鄰接兄弟選擇器
鄰接兄弟選擇器（+）用來選中恰好處於另一個在繼承關係上同級的元素旁邊的元素。
比如要設置緊跟h1的p標籤，設計樣式，如果在他們之間再加一個其他的標籤，就無法應用樣式。
h1 + p {
    font-weight< /span>: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
} 
<article>
    <h1>A heading</h1>
    <!--<h2>哈哈哈</h2>--> 
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
        melon azuki bean garlic .</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
 2.4.4 通用兄弟選擇器
選中一個標籤的兄弟標籤，即使它們不直接相鄰，你還是可以使用通用兄弟關係選擇器（~）
h1 ~ p {
    font-weight< /span>: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}
<article>
    <h1>A heading</h1>
    <p>I am a paragraph .</p>
    <div>I am a div </div>
    <p>I am another paragraph.</ p>
</article>
使用關係選擇器可以將以上任意選擇器組合起來，達到選擇某個元素的目的。