CSS選擇器大全48式

• 2022 年 11 月 4 日
• 筆記
• 前端WEB

00、CSS選擇器

CSS的選擇器分類如下圖，其中最最常用的就是基礎選擇器中的三種：元素選擇器、類選擇器、id選擇器。偽類選擇器就是元素的不同行為、狀態，或邏輯。然後不同的選擇器組合，基於不同的組合關係，產生了6中組合關係選擇器。

01、基礎選擇器（5）

1.1、通配選擇器：*{}

針對所有HTML標籤全部適用，選擇器名=星號*（通配符），一般只做初始化使用。在 CSS3 中，星號 (*) 可以和命名空間組合使用，如 ns|*{}。

/* 通用選擇器，針對所有標籤 */
* {
    color: black;
    font-size: 15px;
    box-sizing: border-box; margin: 0px; padding: 0px;
    font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微軟雅黑", STXihei, "華文細黑", Heiti, "黑體", SimSun, "宋體", sans-serif;
}

1.2、元素選擇器：元素名{}

用元素名稱作為選擇器名稱，如p、h1、div、img等，對作用域內所有該標籤元素生效，所以常用來描述某一元素的共性。

hr {
    margin: 32px 5px;
}
h1 {
    background-color: lightblue;
    text-indent: 0.5em;
}

1.3、類選擇器：.類名{}

定義時前面加點.類名，在標籤的屬性「class」使用該樣式，這應該算是最常用的選擇器了。

/* 類名class選擇器 */
.particle{
    font-size: 18px;
    font-family: 楷體;
}
.pindent{
    text-indent: 2em;
}
<p class="particle pindent">一段文字內容-section</p>

類選擇器可以給所有需要的元素使用，可同時給多個元素使用，應用廣泛。

• 類名字母開頭（小寫），不能以數字開頭。
• 同一個標籤可以用多個類選擇器，空格隔開。基於此，一般會將樣式抽象、分類為多個類樣式，便於復用。

1.4、id選擇器：#id{}

用標籤的id作為選擇器名稱，加井號「#」，針對作用域內指定id的標籤生效，所以只能使用一次。

• ID是標籤的唯一標識，不能重複。如果id重複，樣式其實是會生效的，但查找元素（document.getElementById(id)）只會返回第一個。
• ID字母開頭（小寫），不能以數字開頭。

/* id選擇器 */
#a1{
    color:blueviolet;
    font-size: 16px;
    text-decoration-line:underline ;
}

1.5、屬性選擇器：[屬性=value]{}

元素都有屬性，屬性選擇器是在其他選擇器的基礎上加上屬性的篩選，用來篩選有特定屬性、或屬性值的元素，css3特性。這裡的屬性值匹配是大小寫敏感的，結尾加上字元i（li[title*= "a" i]），則會忽略大小寫敏感。

<style>
li[title]{
    color: red;
}
li[title="a"]{
    font-weight: bold;
}
li[title~="a"]{
    text-decoration: underline;
}
li[title|="a"]{
    text-indent: 2em;
}
li[title^= "a"]{
    text-shadow: 2px 2px 3px black;
}
li[title$= "a"]{
    background: center url(../res/bimg.jpg);
}
li[title*= "a"]{
    background-color: azure;
}
.cli[title]{
    font-style: italic;
}
</style>

<ul>
  <li title="a">item1：a</li>
  <li title="a b">item2：a b</li>
  <li title="c a b">item2</li>
  <li title="a-b" class="cli">item4：a-b</li>
  <li title="abc" class="cli">item5：abc</li>
  <li title="cab" class="cli">item6：cab</li>
  <li title="cba" class="cli">item7：cba</li>
  <li title="cbA1" class="cli">item8：cbA1</li>
</ul>

02、偽類選擇器（43）

2.1、偽類選擇器:

偽類是選擇器的一種，用於選擇處於特定狀態的元素。比如第一個元素、最後一個、奇數序列，或者是當滑鼠指針懸浮時的狀態。

偽類選擇器開頭為冒號 ：，如a:hover{} 表示a元素滑鼠懸浮時的狀態（樣式）

和用戶交互有關的偽類，也叫用戶行為偽類，或叫做動態偽類，比如:link、:active、:visited、:hover。

📢注意順序：先a樣式，然後是他的LVHA。實際項目中，<a>的:link、:visited有時候會省略，合併到a樣式中。

表單文本框的校驗狀態樣式示例：

<style>
    :root {
        /*申明css全局變數*/
        --error-color: red;
    }
    #vtag input:required+label::before{
        content: "*";
        color:var(--error-color);
    }
    #vtag input:in-range{
        border:green 1px solid;
        color: green;
        margin: 20px 0;
    }
    #vtag input:out-of-range{
        border:red 1px solid;
        color:var(--error-color);
        margin: 20px 0;
    }
    #vtag input:out-of-range+label::after{
        content: "，值必須在1到10之間";
        color:var(--error-color);
    }
</style>

<div id="vtag">
    年齡：
    <input type="number" value="13" id="t3" name="t3" min="1" max="10" required>
    <label for="t3"></label>
</div>

表格結構選擇類樣式：表頭高亮樣式；隔行換色，第一列高亮+排名次

<style>
    #vtb{
        border-collapse: collapse;
        width: 300px;
        text-align: center;
        border: 2px black solid;
    }
    #vtb tr:first-child th{ /*標題行樣式*/
        background-color:blueviolet;
        font-weight: bold;
        color: white;
    }
    #vtb tr:nth-of-type(2n+2){ /*隔行換色*/
        background-color: rgb(197, 239, 245);
    }
    #vtb tr:nth-of-type(2n+3){
        background-color: rgb(230, 245, 201);
    }
    #vtb tr td:first-child{ /*第一列的樣式*/
        font-weight: bold;
        color: blue;
        background-color: lightpink;
        text-align: left;
        text-indent: 3px;
    }
    #vtb tr:nth-of-type(2) td:first-child::before{ /*添加排名序號*/
        content: "🥇";
    } 
    #vtb tr:nth-of-type(3) td:first-child::before{
        content: "🥈";
    }   
    #vtb tr:nth-of-type(4) td:first-child::before{
        content: "🥉";
    }                
</style>
<!-- 表格效果：表頭高亮樣式；隔行換色，第一列高亮+排名次 -->
<table id="vtb" border="1">
    <tr>
        <th>姓名</th><th>分數</th><th>學號</th>
    </tr>
    <tr>
        <td>張三</td><td>r1-2</td><td>r1-3</td></tr>
    <tr>
        <td>周倫</td><td>r2-2</td><td>r2-3</td>
    </tr>
    <tr>
        <td>李子柒</td><td>r3-2</td><td>r3-3</td>
    </tr>
    <tr>
        <td>王小二</td><td>r4-2</td><td>r4-3</td>
    </tr>
</table>

2.2、偽元素選擇器::

偽元素，顧名思義，像元素但不是真正的元素。基於一些預定的規則，像一個新的元素一樣的虛擬元素，如段落中的第一行。

偽元素用雙冒號開頭 ::，如p::first-line{}，不過有早期版本的偽元素是單冒號開頭的。

✏️可插入內容的::before 、::after 偽元素，是一組特別的偽元素，配合content屬性，可用css插入（文本）內容（插入的內容不可選中）。

<style>
    #vtag p:first-child::first-letter {
        font-size: 200%;
    }
    #vtag p:first-child::first-line {
        color: red;
    }
    /* 插入內容並設置其樣式（無法選中） */
    #vtag p:first-child::after {
        content: "——《四書五經》";
        color: cornflowerblue;
        font-size: 80%;
    }
    /* 設置文字選擇狀態樣式 */
    #vtag p::selection{
        color:white;
        background-color: #ff0000;
    }
</style>
<div id="vtag">
    <p>出必告，反必面，居有常，業無變。</p>
    <p>湖畔大學的梁寧曾說過：「要找到那件能讓你一直不厭其煩做下去的事，你不厭其煩的地方，就是你的天分所在。追隨內心，做自己喜歡的事，時間久了，你就會成功。」</p>
</div>

03、組合關係選擇器（6）

3.1、合併/並集選擇器：逗號

多種基礎選擇器的合併組合，相當於大家共用一個樣式設置，選擇器名字用逗號,隔開。

選擇器1, 選擇器2, 選擇器3, … { } 例如：div, #su1, .user{...}

<style type="text/css">
    pre, /* 標籤名選擇器 */
    #a1, /* id選擇器 */
    .f1  /* 類名class選擇器 */
    {
        color: skyblue;
        font-weight: bold;
    }
</style>

3.2、交集選擇器：緊密相連

多個選擇器拼接，中間無任何連接符（利用選擇器本身的前綴分割），不能有空格，選擇 都同時滿足的元素。

選擇器1選擇器2選擇器3… { }

a.nav.left[href]{
    background-color: #0000ff;
}
.form-float a.nav{  /*兩個交集，組合成一個後代選擇器*/
    color: white;
}

3.3、後代選擇器：空格

用空格分割，選擇指定元素的** 符合選擇器條件 **的 所有後代 元素，注意這裡的「後代」，即所有子元素都是篩選目標，不限等級，可跨級。支援多個層級，從第一個選擇器（祖父）的開始，一直往下遞歸，所有符合條件的後代，最後一個選擇器為目標元素。

祖父 後代1 後代2 … 後代n(遞歸後代n) { }

<style>
    .f1 p{
        color: red;
    }
    .f1 .f2 p{
        font-weight: bold;
    }
</style>
<div class="f1">
    <p class="f2">子代</p>
    <div class="f11">
        <p>孫代</p>
        <div class="f111">
            <p>曾孫</p>
        </div>
    </div>
    <div class="f2">
        <p>孫代2</p>
    </div>
</div>

3.4、子代選擇器：大於號>

用大於號>分割，查找指定元素的子元素&第一代（兒子）元素中符合所有條件的元素。不同於後代選擇器，只在第一代中找。

父>後代1>後代2>…>後代n { }

.f1>p{
    background-color: antiquewhite;
}
.f1>.f2>p{
    text-indent: 2em;
}

3.5、相鄰兄弟選擇器：加號+

用加號+分割，查找指定元素相鄰&同級的後一個指定元素，二者有相同的父元素且相鄰，中間不可間隔。只向後找一個，要求有點多。

胸弟1+兄弟2+…+兄弟n(第一個兄弟n) { }

.fb2+.fb3{
    font-weight: bold;
}
.fb2+p+p{
    color: red;
}

<div class="fb1">
    <p class="fb2">子代</p>
    <p class="fb3">兄弟1</p>
    <p class="fb4">兄弟3</p>
    <div class="fb11">
        <p>孫代</p>
        <div class="fb111">
            <p>曾孫</p>
        </div>
    </div>
    <p class="fb2">兄弟3</p>
</div>

3.6、普通兄弟選擇器：波浪線~

用波浪線~分割，查找指定元素同級的所有指定兄弟元素，有相同的父元素，符合條件的都會被找出來。不同於相鄰兄弟選擇器，不用相鄰，多個結果。

兄弟1~兄弟2~…~兄弟n(所有同級兄弟n) { }

.fb2~p{
    text-indent: 1em;
}
.fb2~.fb3~p{
    text-indent: 2em;
}

©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀