CSS 3 選擇器

時間 2019-11-20

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

CSS選擇器是很基本的東西。在CSS3中，追加了三個屬性選擇器分別爲html

 <style>
     /*id包含div的元素就會應用CSS效果*/
     [id *= div]{
        color: red;
     }
      /*id以div爲首字符的元素會應用CSS效果*/
     [id ^= div]{
        color: green;
     }
     /*id以div爲結束字符的元素會應用CSS效果*/
     [id $= div]{
         color: white;
     }
     /*id若結尾爲數字，則須要注意加"\"*/
     [id $= \1]{
         color: black;
     }
</style>

這樣使得選擇器有了通配符的概念spa

結構性僞類選擇器

名字很拗口，因此先解釋一下僞類的意思：因爲狀態是動態變化的，因此一個元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態失去時，它又會失去這個樣式；因此叫僞類。code

僞類選擇器

:hover ; :link ; :active ; :target ; :focus(應用於擁有鍵盤輸入焦點的元素htm

在CSS定義中blog

a:active必須被置於a:hover 以後纔是有效的開發

a:hover必須被置於a:link和a:visited以後纔是有效的文檔

僞元素選擇器
僞元素選擇器的效果是須要經過添加一個實際的元素才能達到的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style>
        /*first-line：第一行元素添加效果*/
        p:first-line{
            color: red;
        }
        /*first-letter：第一個字符添加效果*/
        p:first-letter{
            color: green;
        }
        /*before：在所選元素前插入內容*/
        li:before{
            content: "-before-";
        }
        /*after：在所選元素後插入內容*/
        li:after{
            content: "-after-";
            color: grey;
        }
    </style>
</head>
<body>
    <p>第一行<br/>第二行</p>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
</body>
</html>

效果：get

在CSS3中，結構性僞類選擇器的共同特徵是容許開發者根據文檔中的結構來指定元素的樣式。it

:root：指將樣式綁在頁面的根元素中，根元素是指文檔中位於最頂層的結構元素；在頁面中，就是指整個頁面的html部分。
:empty：指沒有內容的部分
:not(XXX)：排除XXX(應用場景：想對某個結構元素使用樣式，可是想排除這個結構元素下面的子結構元素，讓它不使用當前這個樣式)
:target：使用target選擇器，只對頁面中某個target元素指定樣式。該樣式只在用戶點擊頁面中的超連接，並且並跳轉到target元素後才起做用。
例子：io

咱們根據例子來理解上面的話

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        /*root覆蓋了整個頁面*/
        :root{
            background-color: grey;
        }
        /*下面的"*"是通配符，()包含的是想被排除的部分*/
        div *:not(h1){
            color: blueviolet;
        }
        /*empty*/
        :empty{
            background-color: wheat;
        }
        /*target*/
        :target{
            background-color: orange;
        }
    </style>
</head>
<body>
    <h3>:not</h3>
    <div>
        <h1>Hello?</h1>
        <h2>Hi!</h2>
        <p>nice to meet u</p>
    </div>
<!--###########################################-->
    <h3>:empty</h3>
    <table>
        <tr>
            <td>some</td>
            <td>any</td>
        </tr>
        <tr>
            <td>where</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>two</td>
        </tr>
    </table>
 <!--###########################################-->
    <h3>:target</h3>
    <a href="#a1">menu·1</a>|
    <a href="#a2">menu·2</a>|
    <a href="#a3">menu·3</a>|
    <div id="a1">
        <h1>content·1</h1>
    </div>
    <div id="a2">
        <h1>content·2</h1>
    </div>
    <div id="a3">
        <h1>content·3</h1>
    </div>
</body>
</html>

效果：

關於root的小細節
若是使用了root，那body只給內容區域添加效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style>
        :root{
            background-color: grey;
        }
        body{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <h1>Hello?</h1>
        <h2>Hi!</h2>
        <p>nice to meet u</p>
    </div>
</body>
</html>

效果：

若是沒有使用root，那麼body則是給整個頁面添加效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style>
        /*root覆蓋了整個頁面*/
        :root{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div>
        <h1>Hello?</h1>
        <h2>Hi!</h2>
        <p>nice to meet u</p>
    </div>
</body>
</html>

效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。