0. 前言

也許你已經(jīng)學(xué)會了CSS的幾個(gè)簡單常用的選擇器：#id合敦，.class桩皿，標(biāo)簽選擇器豌汇，后代選擇器，這就讓你滿足了么泄隔？so拒贱，我在里列舉一些CSS3選擇器，讓你在寫代碼的時(shí)候更加得心應(yīng)手佛嬉，當(dāng)然逻澳，我也是想在我忘了的時(shí)候，可以自己反過頭來看看暖呕。

學(xué)霸.jpg

1. 簡介

選擇器的作用：使用選擇器對HTML頁面進(jìn)行操作斜做，實(shí)現(xiàn)一對一，多對一湾揽，一對多的控制瓤逼。

2. 選擇器

2.1 偽類選擇器

:first-line 匹配每個(gè)元素里首行。

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>
    大家，新年快樂，恭喜發(fā)財(cái)精居！
</div>

恭喜發(fā)財(cái).gif

2.2 目標(biāo)偽類選擇器

:target選擇當(dāng)前觸發(fā)#新的元素

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

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

二級菜單.gif

2.3 狀態(tài)偽類選擇器

:disabled選擇每個(gè)禁用的 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;
}

獲得焦點(diǎn)：<input type="text" />

獲得焦點(diǎn).gif

input:checked{
        height: 100px;
}

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

選中.gif

2.4 結(jié)構(gòu)偽類選擇器

:root選擇文檔的根元素刮便。

:root{
    background-color: pink;
}

根元素.png

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

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

<p></p>
<p></p>
<p>
            
</p>
<p><!-- 這是注釋 --></p>
<p>有內(nèi)容的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>

第一個(gè)子元素.png

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

最后一個(gè)子元素.png

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

選擇其父元素第n個(gè)子元素.png

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

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

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

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

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

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

第一個(gè)子元素.png

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

選擇其父元素第n個(gè)子元素.png

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

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

父元素下唯一的一個(gè)div.png

2.5 否定偽類選擇器

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

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

<ul>
    <li>第一個(gè)</li>
    <li class="second">第二個(gè)</li>
    <li>第三個(gè)</li>
    <li>第四個(gè)</li>
</ul>

非element的其他元素.png

2.6 層次選擇器

element1~element2選擇element1元素后面的每個(gè)兄弟element2元素唁影。

div p~h3{
    color: red;
}

<p>最外層的P元素</p>
<div>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <p>內(nèi)層的P元素</p>
    <h3>我是h3</h3>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
    <div>
        <p>最內(nèi)層的P元素</p>
    </div>
</div>

選擇element1元素后面的每個(gè)兄弟element2元素.png

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

選擇element1元素后一個(gè)兄弟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="我是一個(gè)按鈕" /><br />
<input type="submit"  value="我是一個(gè)提交" /><br />

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

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

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

input[value="我是一個(gè)提交"]{
        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" ]的區(qū)別是[attribute ^= "value" ]不需要考慮"-"。

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

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

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

3. 后記

煩.jpg

哎拂蝎，寫這些標(biāo)簽太枯燥了，沒什么太大意思尊浪，但我還是堅(jiān)持的寫完了匣屡，一大波CSS3選擇器希望對你有幫助，點(diǎn)贊啦拇涤！捣作，分享啊鹅士！