CSS - 各種選擇器1. 通配符選擇器 *2. ID 選擇器 #3. 類選擇器 .4. 交集選擇器5. 并集選擇器 ,6. 後代選擇器 空格 7. 子元素選擇器 >8. 相鄰兄弟選擇器 +9. 通用兄弟選擇器 ~10. 屬性選擇器 []

1. 通配符選擇器

*

通配符選擇器

*

可以選中所有的元素。作用範圍太大，可能會導緻性能比較差。

* {
    margin: px;
}
           

2. ID 選擇器

#

ID 選擇器每次隻選中一個具有指定 ID 的元素。

ID 在每個 HTML 頁面上具有唯一性，稀缺性。

<div id="nav"></div>

#nav {
    position: relative;
}
           

3. 類選擇器

.

類選擇器每次選中一系列具有相同 class 的元素。

<div class="good"></div>

.good {
    color: red;
}
           

4. 交集選擇器

交集選擇器隻選中同時滿足所有這些選擇器的元素。

兩個或多個選擇器相鄰，且選擇器之間沒有任何的連接配接符号，構成交集選擇器。選擇器可以是标簽名、id 或 class 類名。

<p class="good">this is p1</p>
           

p.good {
    color: red;
}
           

5. 并集選擇器

,

并集選擇器選中所有的含有并集選擇器中的至少一個選擇器的元素。

選擇器之間利用逗号

,

連接配接。選擇器可以是标簽名、id 或 class 類名。

<h1 class="h">this is h</h1>
<p class="p">this is p </p>
           

.h, .p {        /* class 為 p 或 h 的元素都會選中*/
    color: red;
}
           

6. 後代選擇器 空格

後代選擇器選中具有指定後代關系（包括但不限于父子，爺孫等）的子元素。

選擇器之間利用空格

連接配接。

<div class="d1">
    <div class="d2">
        <p class="p">this is p1 </p>
    </div>
    <p class="p">this is p2 </p>
</div>
           

.d1 .p { /* 不管父子還是爺孫，都是後代 */
    color: red;
}
           

7. 子元素選擇器

>

子元素選擇器選中具有指定父子關系的子元素。

選擇器之間利用

>

連接配接。

<div class="d1">
    <div class="d2">
        <p class="p">this is p1 </p>
    </div>
    <p class="p">this is p2 </p>
</div>
           

.d1 > .p { /* 隻選擇父子關系 */
    color: red;
}
           

8. 相鄰兄弟選擇器

+

相鄰兄弟選擇器：可選擇緊接在第一個元素後的元素，且二者有相同父元素。

<div class="d1">--content--</div>
<p>this is p</p>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
           

li + li { /* 第二個和第三個清單項變為紅色。第一個清單項不受影響。 */
    color: red;
}
d1 + p {
    margin-top:px;
}
           

9. 通用兄弟選擇器

~

通用兄弟選擇器：第二個元素必須跟（不一定是緊跟）在第一個元素之後，且他們都有一個共同的父元素。

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
           

p ~ span { /* 隻影響 p 元素後面的所有的 span 元素 */
  color: red;
}
           

10. 屬性選擇器

[]

屬性選擇器選擇帶有特殊屬性的标簽。

常用于區分 input 标簽的屬性。

用法	含義
E[attr]	存在 attr 屬性的元素
E[attr=val]	存在 attr 屬性且值完全等于 val的元素
E[attr*=val]	存在 attr 屬性且值的任意位置包含 val 的元素
E[attr^=val]	存在 attr 屬性且值的開始位置包含 val 的元素
E[attr$=val]	存在 attr 屬性且值的結束位置包含 val 的元素

<p class="good">this is p1</p>
<input type="text" value="this is input">
<input type="password" id="password">
           

p[class]{
    color: red;
}
input[type=password]{
    color: orange;
}
           

11. 僞元素選擇器

為了和僞類區分，僞元素選擇器用了兩個冒号開頭，

::first-letter

文法	含義
::before	在元素前添加内容，必須含有 content 屬性
::after	在元素後添加内容，必須含有 content 屬性
::first-letter	文本的第一個字
::first-line	文本的第一行
::selection	使用者選中的文本

.d1::before {
    content: "before";
}
.d1::after {
    content: "after";
}