CSS選擇器詳解：用最簡潔的方式實現網頁樣式

一、初步認識選擇器

CSS選擇器是指通過CSS樣式表，對HTML中的元素進行定義和裝飾的方法。

選擇器由一些用於指定 HTML 元素的組合而成，這些組合在當前文檔中找到一些特定的元素。

在CSS樣式表中，常見的選擇器有id選擇器、class選擇器和標籤選擇器。

    /* id選擇器 */
    #example {
        color: red;
    }

    /* class選擇器 */
    .example {
        color: blue;
    }

    /* 標籤選擇器 */
    p {
        color: green;
    }

二、認識選擇器組合

可以通過將兩個或多個選擇器組合在一起來選擇特定的HTML元素。

在選擇器組合中，多個選擇器之間使用空格隔開，表示選擇元素的後代關係。

    /* 對id為example的元素下的p元素設置字體顏色 */
    #example p {
        color: red;
    }

    /* 對class為example的p元素設置字體顏色 */
    p.example {
        color: blue;
    }

三、認識屬性選擇器

屬性選擇器可選取帶有指定屬性的元素。

屬性選擇器可以帶有屬性值，以便更精細地選擇要渲染的元素。

    /* 匹配屬性title值為example的a元素 */
    a[title="example"] {
        color: red;
    }

    /* 匹配屬性值以example開頭的a元素 */
    a[title^="example"] {
        color: blue;
    }

四、認識偽類選擇器

偽類選擇器指的是那些在選擇的元素處於某個狀態時，才會起作用的選擇器。

常見的偽類選擇器包括:hover、:active、:first-child等。

    /* 鼠標放上去時，字體變為紅色 */
    a:hover {
        color: red;
    }

    /* 點擊過的鏈接變為灰色 */
    a:visited {
        color: gray;
    }

五、認識偽元素選擇器

偽元素選擇器用於向某些選擇器添加特殊的效果。

常見的偽元素選擇器包括::before、::after等。

    /* 在p元素之前添加內容 */
    p::before {
        content: "Hello";
    }

    /* 在p元素之後添加內容 */
    p::after {
        content: "World";
    }