CSS選擇器定位元素詳解

一、基礎選擇器

基礎選擇器是CSS選擇器中最簡單的一種，通過基礎選擇器可以選定HTML中所有的元素或某一特定元素。

1. 通配符選擇器

通配符選擇器“*”可以匹配HTML文檔中所有的元素。

    
/* 選中所有元素 */
* {
    color: red;
}
    

2. 元素選擇器

元素選擇器通過HTML元素名來選定元素，可以使用標籤名、類名或ID名來進行選擇。

    
/* 選中所有p標籤 */
p {
    color: red;
}

/* 選中class為foo的元素 */
.foo {
    color: red;
}

/* 選中id為bar的元素 */
#bar {
    color: red;
}
    

3. 屬性選擇器

通過屬性選擇器，我們可以根據屬性的存在和屬性值的匹配性來選定元素。

    
/* 選中擁有title屬性的所有元素 */
[title] {
    color: red;
}

/* 選中class為bar的title屬性 */
[title="bar"] {
    color: blue;
}
    

4. 偽類選擇器

偽類選擇器用於選中元素的特殊狀態，如hover、active狀態。

    
/* 鼠標懸停時改變a標籤的背景顏色 */
a:hover {
    background-color: yellow;
}
/* 點擊a標籤時改變a標籤的顏色 */
a:active {
    color: blue;
}
    

二、組合選擇器

組合選擇器是多個選擇器組合使用的產物，主要包括字選擇器、後代選擇器、相鄰兄弟選擇器和普通兄弟選擇器。

1. 後代選擇器（Space Selector）

後代選擇器用於選擇元素的後代元素。

    
/* 選中ul元素下的所有li元素 */
ul li {
    color: red;
}
    

2. 子選擇器（Child Selector）

子選擇器僅選擇作為指定元素子元素的選定元素。

    
/* 選中nav元素下的所有直接子元素 */
nav > * {
    background-color: yellow;
}
    

3. 相鄰兄弟選擇器（Adjacent Sibling Selector）

相鄰兄弟選擇器選擇元素後面的相鄰兄弟元素。

    
/* 選中class為foo的元素緊隨在class為bar的元素後面的所有元素 */
.bar + .foo {
    color: red;
}
    

4. 普通兄弟選擇器（General Sibling Selector）

普通兄弟選擇器也選擇後面的兄弟元素，但是可以選擇所有後面的滿足條件的兄弟元素。

    
/* 選中在class為bar的元素後面的所有class為foo的元素 */
.bar ~ .foo {
    color: red;
}
    

三、複合選擇器

複合選擇器是多個選擇器組合而成的，是CSS選擇器中最常用的選擇器。

1. 複合選擇器

    
/* 選中所有class為foo且是p標籤的元素 */
p.foo {
    color: red;
}

/* 選中所有class為foo和class為bar的元素 */
.foo.bar {
    color: red;
}

/* 選中class為foo的div元素中class為bar的p元素 */
div.foo p.bar {
    color: red;
}
    

2. 多重選擇器

多重選擇器是指同時作用於多個選擇器的一種選擇器。

    
/* 選中所有p和ul元素 */
p, ul {
    color: red;
}

/* 選中class為foo和class為bar的所有元素 */
.foo, .bar {
    color: red;
}
    

四、偽元素選擇器

偽元素選擇器用於選中元素文本的某一部分，並對其進行樣式設置。

1. ::after偽元素

::after偽元素用於在元素內容之後添加內容，並在CSS中進行樣式設置。

    
/* 在p元素內容後添加"（已結束）" */
p::after {
    content: "(已結束)";
    color: red;
}
    

2. ::before偽元素

::before偽元素和::after偽元素類似，但是是在元素內容之前添加內容。

    
/* 在h1元素內容前添加"#" */
h1::before {
    content: "#";
    color: blue;
}
    

五、總結

CSS選擇器是網頁開發的重要工具之一，合理運用選擇器能夠提高CSS樣式的效率，減少代碼量。在實際開發中，我們需要綜合運用各種選擇器，用最簡潔的代碼實現最複雜的樣式。