CSS 選擇器組合

CSS 選擇器組合用於指定選擇器之間的特定關係，以便可以根據 HTML 結構中元素之間的關係進行樣式設定。換句話說，組合器可以幫助您根據元素在 HTML 文件中的位置和層次結構來定位元素。

例如，使用組合器，您可以設定緊跟在 div 元素後面的段落元素的樣式。

組合器的型別

CSS 主要有四種組合器型別

後代組合器 (空格)
子元素組合器 (>)
相鄰兄弟組合器 (+)
通用兄弟組合器 (~)

現在，我們將檢視每種組合器的示例用法，在此之前，請確保您已經熟悉CSS 選擇器。

CSS 後代組合器

後代組合器用於選擇巢狀在另一個元素內的元素，無論巢狀深度如何。它們通常用單個空格 (" ") 表示。

例如，您可以像這樣定位 <div> 內的所有 <p> 元素

div p {
   /* CSS styles for all p elements inside div */
}

同樣，我們可以組合任何選擇器，例如類、ID 等。在下面的示例中，我們將元素選擇器與類選擇器組合。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            background-color: lightblue;
            padding: 20px;
        }
        .parent p {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h3> This is h3 tag inside parent element </h3>
        <p> This is a p tag inside parent element. </p>
        <p> This is a p tag inside parent element. </p>
    </div>
    <div>
        <p> This is a p tag outside parent element. </p>
    </div>
</body>

</html>

CSS 子元素組合器

子元素組合器 (>) 用於選擇指定元素的直接子元素。它不會選擇巢狀在子元素內的元素。

例如，您可以像這樣定位 <div> 內的所有直接 <p> 子元素

div > p {
   /* CSS styles for all direct p children inside div */
}

同樣，我們可以組合任何選擇器，例如類、ID 等。在下面的示例中，我們為類 parent 內的所有 p 標籤設定樣式。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            background-color: lightgreen;
            padding: 20px;
        }
        .parent > p {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="parent">
        <h3> This is an h3 tag inside parent. </h3>
        <p> This is a direct p tag inside  parent. </p>
        <p> This is another direct p tag inside parent. </p>

        <div>
            <p> 
                This is a p tag nested inside a div in parent element. 
            </p>
        </div>
    </div>

    <div>
        <p> This is a p tag outside parent element. </p>
    </div>
</body>

</html>

CSS 相鄰兄弟組合器

相鄰兄弟組合器 (+) 用於選擇緊跟在指定元素之前的元素。它隻影響緊跟在指定元素後面的元素。

例如，您可以像這樣定位緊跟在 <h3> 元素後面的 <p> 元素

h3 + p {
   /* CSS styles for the p element immediately following an h3 */
}

在下面的示例中，我們定位緊跟在 <h3> 元素後面的 <p> 元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            background-color: lightyellow;
        }
        h3 + p {
            color: purple;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>This is an h3 tag</h3>
        <p> 
            This is a p tag that immediately follows the h3 tag.
        </p>
        <p>
            This is another p tag, but it is not immediately 
            after the h3 tag.
        </p>
    </div>
</body>

</html>

CSS 通用兄弟組合器

通用兄弟組合器 (~) 用於選擇所有作為指定元素的兄弟元素，並且在 HTML 結構中出現在其後面的元素。它將選擇所有匹配的兄弟元素，而不僅僅是緊跟在後面的一個。

例如，您可以像這樣定位所有跟在 <h3> 元素後面的 <p> 元素

h3 ~ p {
   /* CSS styles for all p elements following an h3 element */
}

在下面的示例中，我們定位所有作為 <h3> 元素的兄弟元素，並且出現在其後面的 <p> 元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            background-color: #f0f0f0;
        }
        h3 ~ p {
            color: darkorange;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="container">
        <p> This is a p tag before h3 tag </p>
        <h3> This is an h3 tag </h3>
        <p> This is a p tag that follows the h3 tag. </p>
        <p> This is another p tag that also follows the h3 tag. </p>
        <div> This is a div tag. </div>
        <p> This is a p tag after div tag </p>
    </div>
    <p> This is a p tag after h3 tag outside container. </p>
</body>

</html>

組合多個組合器

在 CSS 中，您可以組合多個組合器以建立更復雜和更具體的選擇器。透過組合不同的組合器，您可以根據 HTML 結構中更復雜的關係來定位元素。

例如，您可以像這樣定位作為 <div> 的直接子元素並且緊跟在 <h3> 元素後面的 <p> 元素

div > h3 + p {
   /* CSS styles for p elements that are direct children of a div and 
      immediately follow an h3 element */
}

在下面的示例中，我們將子元素組合器與相鄰兄弟組合器組合以定位導航選單內的錨元素。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        nav {
            padding: 10px;
            background-color: #f0f0f0;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        ul > li {
            display: inline-block;
            margin-right: 15px;
        }
        ul > li + a {
            color: red;
            text-decoration: underline;
        }
        ul > li > a {
            color: blue;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <a href="#">Contact</a>
        </ul>
    </nav>
</body>

</html>

列印頁面