《圖解CSS》選擇器

在CSS簡介一節中，我們瞭解到，CSS的語法如下：

選擇器 { 屬性1：屬性值； 屬性2：屬性值}

那麼有哪些選擇器可以使用呢？

上下文選擇符：基於祖先或同胞元素選擇一個元素
ID和類選擇符：基於id和class屬性的值選擇元素
屬性選擇符：基於屬性的有無和特徵選擇元素

上下文選擇符

基於祖先

語法

祖先標籤 子標籤 {聲明}

或

祖先標籤 ... 父標籤 子標籤 {聲明}

這裏的祖先標籤可以是子標籤的父標籤，也可以是子標籤的任何一個上級標籤。
示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article h3 { color: red; }
        article section p {color: blue;}
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>

子選擇符>

語法：

父標籤>子標籤

此時父標籤必須包裹着子標籤，也就是子標籤的父元素只能是父標籤。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        article>h3 { color: red; }
        article>section>p {color: blue;}
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

該示例只是在基於父標籤選擇符的示例上加了子選擇符，跨級選擇的header中的還h3就不起作用了。

緊鄰同胞選擇符+

語法：

標籤1 + 標籤2

標籤2必須緊跟在其同胞標籤1的後面。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header+section { color: red; }  /*起作用*/
        header+footer {color: blue;} /*不起作用*/
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

一般同胞選擇符~

語法：

標籤1~標籤2

標籤2必須跟（不一定緊跟）在其同胞標籤1後面。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header~section { color: red; }  /*起作用*/
        header~footer {color: blue;} /*起作用*/
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

通用選擇符*

*是一個通配符，匹配任何元素
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { color: red; }
        footer * {color: blue;} /* 覆蓋上面的樣式*/
    </style>
</head>
<body>
    <article>
        <header>
            <h3>Header</h3>
        </header>
        <section>
            <p>文章段落</p>
        </section>
        <footer>
            <span>
                Footer
            </span>
        </footer>
    </article>
</body>
</html>

ID和類選擇符

ID和類爲我們選擇元素提供了另一套手段，利用它們可以不用考慮文檔的層次結構。只要在HTML標記中爲元素添加了id和class屬性，就可以在CSS選擇符中使用ID和類名，直接選中文檔中特定的區域。

注意

id和clss不能以數字或特殊符號開頭。id具有唯一性，一篇HTML文檔不能具有相同命名的id。

class屬性

常規語法：

.類名{聲明}

標籤帶類選擇符，語法：

標籤.類名{聲明}

多類選擇符，語法：

.類名1 .類名2{聲明}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header{color: red;}  /*常規*/
        div.footer{ color: blue;} /*標籤帶類選擇符*/
        .body.content{color:darkred}  /*多類選擇符*/
    </style>
</head>
<body>
    <div class="article">
        <div class="header">文本頭部</div>
        <div class="body content">文本內容</div>
        <div class="footer">文本尾部</div>
    </div>
</body>
</html>

id屬性

id與class類似，id選擇符使用“#”選擇。
常規語法：

#id{聲明}

標籤帶id選擇符，語法：

標籤#id{聲明}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #header{color: red;}  /*常規*/
        div#body{ color: blue;} /*標籤帶類選擇符*/
    </style>
</head>
<body>
    <div id="article">
        <div id="header">文本頭部</div>
        <div id="body">文本內容</div>
        <div id="footer">文本尾部</div>
    </div>
</body>
</html>

從上面的示例中可以看出，class和id還是有很多相似的地方，那麼該如何選擇呢？

id 還是 class？

個人觀點：能不用就都不用，使用上下文選擇符。如果爲了調整樣式使用class，爲了操作數據，配合JavaScript使用id。

屬性選擇符

語法：

標籤名[屬性名]

或

標籤名[屬性名="屬性值"]

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[title] {color: red;}
        div[title="footer"] {color: blue;} /*覆蓋上面的樣式*/
    </style>
</head>
<body>
    <div title="header">header</div>
    <div title="body">body</div>
    <div title="footer">footer</div>
</body>
</html>

僞類

僞類這個叫法源自它們與類相似，但實際上並沒有類會附加到標記中的標籤上。僞類分兩種，UI僞類和結構化僞類。

UI（User Interfact,用戶界面）僞類會在HTML元素處於某個狀態時（比如鼠標指針位於鏈接上），爲該元素應用CSS樣式
結構化僞類會在標記中存在某種結構上的關係時（如某個元素是一組元素中的第一個或最後一個），爲相應元素應用CSS樣式

UI僞類

UI僞類會基於特定HTML元素的狀態應用樣式。最常使用UI僞類的元素是鏈接（a元素），利用UI僞類，鏈接可以在用戶鼠標懸停時改變文本顏色，或者去掉文本的下劃線等等。
一個冒號(:)表示僞類，兩個冒號(::)表示CSS3新增的爲元素。

鏈接僞類

針對鏈接僞類一共有4個：

link: 待被點擊
visited: 用戶此前點擊過這個鏈接
hover：懸停在鏈接上
active：鏈接正在被點擊（鼠標在元素上按下，還沒有釋放）

注意

這4個僞類的順序，link、visited、hover、active。如果不按照這樣的順序使用它們，瀏覽器可能不會顯示預期結果

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{ text-decoration: underline; }
        a:link { color: rgb(20, 112, 8); }
        a:visited { color: black; }
        a:hover { color: red; }
        a:active { color: cyan;}
    </style>
</head>
<body>
    <a href="http://www.iotzzh.com" target="_blank">http://www.iotzzh.com</a>
</body>
</html>

貌似link的樣式並沒有被應用起來，當把visited移除時它便會被應用，可見這四個僞類並不是每次都是一起出現的。

focus僞類和target僞類

focus僞類：獲得焦點時的樣式

語法 任何標籤：focus{聲明}

target僞類：如果用戶點擊一個指定頁面其他元素的鏈接，則那個元素就是目標（target），可以用：target僞類選中它。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input:focus { outline: 1px solid red; border: 1px solid red;} 

        #first-paragraph:target { color: red;}
        #second-paragraph:target { text-decoration: underline;}

    </style>
</head>
<body>
    <input type="text"><br>

    <a href="#first-paragraph">第一自然段</a>
    <a href="#second-paragraph">第二自然段</a>

    <div id="first-paragraph">這是第一自然段的內容</div>
    <div id="second-paragraph">這是第二自然段的內容</div>
</body>
</html>

結構化僞類

結構化僞類可以根據標記的結構應用樣式，比如根據某元素的父元素的或前面的同胞元素是什麼。

：first-child和：last:child

:first-child代表一組同胞元素中的第一個元素，而:last-child則代表最後一個。

注意

:last-child或者是:first-child這樣的僞類時，其前後都不應該有其它的兄弟節點，所以解決辦法是使用一個div將標籤包裹起來即可。

:nth-child(n或odd/even)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box { width: 100px; height: 100px; display: inline-block; }
        .box:first-child { background-color: red;}
        .box:last-child { background-color: blue; }

        table tr:nth-child(odd) {background-color: darkgoldenrod; }
        table tr:nth-child(even) {background-color:darkmagenta; }
        table tr:nth-child(1) { background-color: red; color: white; }
    </style>
</head>
<body>
    <div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <table>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
        <tr>
            <td>cell1</td>
            <td>cell2</td>
            <td>cell3</td>
        </tr>
    </table>
</body>
</html>

僞元素

僞元素就是在文檔中若有實無的元素。下面介紹幾個常用的僞元素：

::first-letter僞元素

段落首字符

::first-line僞元素

文本段落（一般情況下是段落）的第一行

::before和::after僞元素

可用於在特定元素前面或後面添加特殊內容

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .first-letter::first-letter{font-size: large; color: red;}

        .content::first-line {font-style: italic; color: rgba(100, 0, 25, 0.5);}

        .before::before { content: '添加before:'; color: sandybrown;}
        .after::after {content: ':添加after'; color: skyblue;}
    </style>
</head>
<body>
    <div class="first-letter">測試僞元素::first-letter</div>
    <div class="content">
        <p>測試僞元素::first-line 第一自然段</p>
        <p>測試僞元素::first-line 第二自然段</p>
        <p>測試僞元素::first-line 第三自然段</p>
    </div>

    <div class="before">測試before</div>
    <div class="after">測試after</div>

</body>
</html>

如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “點贊” “評論” “收藏” 一鍵三連哦！
聽說 👉 點贊 👈 的人運氣不會太差，每一天都會元氣滿滿哦嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我堅持下去的動力。點贊後不要忘了👉 關注 👈我哦！