0. 前言

也許你已經學會了CSS的幾個簡單常用的選擇器：#id，.class，標簽選擇器，后代選擇器，這就讓你滿足了么？so，我在里列舉一些CSS3選擇器，讓你在寫代碼的時候更加得心應手，當然，我也是想在我忘了的時候，可以自己反過頭來看看。

學霸.jpg

1. 簡介

選擇器的作用：使用選擇器對HTML頁面進行操作，實現一對一，多對一，一對多的控制。

2. 選擇器

2.1 偽類選擇器

:first-line 匹配每個元素里首行。

p:first-line{
    color: red; 
}

<p>
    北京歡迎您！<br/>
    Welcome to Beijing!
</p>

北京歡迎您.png

p:first-letter{
    font-size: 20px;
    color: blue;    
}

北京歡迎您.png

p:before{
    content: "哈哈";
}

<p>北京歡迎您！</p>

北京歡迎您.png

p:after{
    content: "嘿嘿";
}

北京歡迎您.png

::selection選擇被用戶選取的元素部分。

div::selection {
    color: deeppink;
}

<div>
    大家，新年快樂，恭喜發財！
</div>

恭喜發財.gif

2.2 目標偽類選擇器

:target選擇當前觸發#新的元素

div:target{
        width: 200px;
        height: 200px;
        background-color: orange;
}

<p><a href="#first">第一個</a></p>
<div id="first"></div>
<p><a href="#second">第二個</a></p>
<div id="second"></div>
<p><a href="#third">第三個</a></p>
<div id="third"></div>

二級菜單.gif

2.3 狀態偽類選擇器

:disabled選擇每個禁用的 input 元素

input:disabled{
        background-color: black;
}

禁用：<input type="text" disabled="disabled" />

禁用.png

input:enabled{
        background-color: orange;
}

非禁用：<input type="text" />

非禁用.png

input:read-only{
        background-color: pink; 
}

只讀：<input type="text" readonly="readonly" />

只讀.png

input:focus{
        background-color: seagreen;
}

獲得焦點：<input type="text" />

獲得焦點.gif

input:checked{
        height: 100px;
}

選中：<input type="checkbox" />

選中.gif

2.4 結構偽類選擇器

:root選擇文檔的根元素。

:root{
    background-color: pink;
}

根元素.png

:empty選擇沒有子元素的空元素

p{
    height: 50px;
    background-color: orange;
}

<p></p>
<p></p>
<p>
            
</p>
<p><!-- 這是注釋 --></p>
<p>有內容的P元素</p>

空元素.png

#box :first-child{
        background-color: red;
        height: 100px;
}

<div id="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</div>

第一個子元素.png

#box :last-child{
        background-color: red;
        height: 100px;
}

最后一個子元素.png

#box :nth-child(2){
        background-color: red;
        height: 100px;
}

選擇其父元素第n個子元素.png

#box :nth-last-child(2){
        background-color: red;
        height: 100px;
}

選擇屬于其父元素的第n子元素（從最后一個子元素開始數）.png

:only-child選擇屬于其父元素的唯一子元素的元素。

#box2 :only-child{
        background-color: brown;
        height: 150px;
}

選擇屬于其父元素的唯一子元素的元素.png

#box p:first-of-type{
        background-color: red;
        height: 100px;
}

第一個子元素.png

#box :nth-of-type(2){
        background-color: red;
        height: 100px;
}

選擇其父元素第n個子元素.png

#box div:only-of-type{
        height: 100px;
        background-color: red;
}

<div id="box">
            //這是新添加的父元素下唯一的一個div
            <div></div>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
</div>

父元素下唯一的一個div.png

2.5 否定偽類選擇器

:not(element)選擇非element元素的每個元素。

li{
    background-color: gold;
}
            
li:not(.second){
    background-color: red;
}

<ul>
    <li>第一個</li>
    <li class="second">第二個</li>
    <li>第三個</li>
    <li>第四個</li>
</ul>

非element的其他元素.png

2.6 層次選擇器

element1~element2選擇element1元素后面的每個兄弟element2元素。

div p~h3{
    color: red;
}

<p>最外層的P元素</p>
<div>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <p>內層的P元素</p>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <div>
        <p>最內層的P元素</p>
    </div>
</div>

選擇element1元素后面的每個兄弟element2元素.png

div p+h3{
    color: blue;
    font-size: 40px;
}

選擇element1元素后一個兄弟element2元素.png

div>div>p{
    font-size: 30px;
    color: blue;    
}

選擇父元素element1元素的所有element2元素.png

2.7 屬性選擇器

[attribute]選擇帶有 attribute 屬性所有元素。

input[value]{
        background-color: orange;
}

<input type="text" name="inner" /><br />
<a href="01_偽元素選擇器.html">哈哈哈哈哈哈</a><br />
<input type="text" name="inner be" /><br />
<input type="button" name="inner-haha" value="我是一個按鈕" /><br />
<input type="submit"  value="我是一個提交" /><br />

選擇帶有 attribute 屬性所有元素.png

input[value][name]{
            background-color: skyblue;
}

選擇帶有 attribute 和 value 兩個屬性所有元素.png

input[value="我是一個提交"]{
        background-color: seagreen;
}

.png

input[name |= "inner" ]{
        background-color: red;
}

注意：有空格的也能被選中， 而以"-"為銜接才能不被選中

選擇 attribute 屬性值以 "value" 開頭的所有元素.png

input[name ~= "be"]{
        background-color: cornflowerblue;
}

選擇 attribute 屬性值中有 value 的所有元素.png

input[value *= "提交"]{
        background-color: indigo;
}

選擇 attribute 屬性值中包含 value 的所有元素.png

input[name ^= "inner"]{
        background-color: deeppink;
}       

注意：[attribute |= "value" ]與[attribute ^= "value" ]的區別是[attribute ^= "value" ]不需要考慮"-"。

選擇 attribute 屬性值以 "value" 開頭的所有元素.png

a[href $= ".html"]{
        font-size: 30px;
}

選擇 attribute 屬性值以 "value" 結尾的所有元素.png

3. 后記

煩.jpg

哎，寫這些標簽太枯燥了，沒什么太大意思，但我還是堅持的寫完了，一大波CSS3選擇器希望對你有幫助，點贊啦！，分享啊！