了解 CSS 兄弟選擇器：初學者指南

CSS 提供了多種選擇器來定位 HTML 文件中的特定元素。雖然類別和 ID 選擇器很常用，但它們並不總是根據元素與其他元素的關係來定位元素。這就是 CSS 同級選擇器發揮作用的地方。

CSS 同級選擇器對於建立複雜且靈活的 Web 佈局至關重要，它允許您根據元素與其他元素的相對位置來設定元素的樣式。當設計取決於元素放置並使用各種組合器（例如後代組合器、子組合器、相鄰同級組合器等）時，它們特別有用。這種方法可讓您將樣式套用至特定元素，而無需新增額外的類別或 ID，從而減少程式碼混亂。

什麼是 CSS 兄弟選擇器？

CSS同級選擇器用於選擇同級元素（共享相同的父元素），即，它可以幫助您根據與共享相同父元素的其他元素的關係來選擇 HTML 元素。這些組合符號是獨特的符號，可以幫助瀏覽器理解 HTML 元素之間的關係。

CSS 同級選擇器有兩種：

• 鄰近兄弟選擇器 ( )

• 通用兄弟選擇器 (-)

這就是 CSS 同級選擇器對於 Web 開發人員至關重要的原因：

• 增強的特異性：與通用選擇器相比，同級選擇器允許更精確的元素樣式。這增強了 CSS 程式碼的可維護性和組織性。

• 動態佈局：透過專注於專案相對於兄弟專案的位置，您可以開發適應內容結構的佈局。想像容器的第一個和最後一個子元素的樣式不同。

• 視覺關係：它使您能夠在專案之間創建視覺關係。考慮突出顯示標題，後面跟著相應的圖像或在相鄰部分之間添加邊框。

• 減少程式碼重複：當您需要根據元素在特定容器中的位置設定元素樣式時，兄弟選擇器可以消除重複的類別分配的需要，從而使程式碼更清晰。

• 效率：它可以透過最小化冗餘來提高 CSS 效率。兄弟選擇器可讓您編寫簡單、可重複使用的適應文件結構的 CSS 規則，而不是編寫許多規則來針對不同條件下的某些項目。

• 響應式設計：它在響應式網頁設計中非常方便。它們允許您根據項目與其他項目的關係來調整項目的佈局或外觀，這對於在多種設備和螢幕尺寸上提供一致的用戶體驗至關重要。

CSS 同級選擇器可讓您超越純粹基於元素的樣式方法。它們使您能夠利用 HTML 的層次結構來產生更一致且視覺上令人愉悅的使用者體驗。

CSS 兄弟選擇器的類型

CSS 兄弟選擇器有兩種類型：相鄰選擇器和通用選擇器。兩者對於允許開發人員根據兄弟關係定位元素都很重要，但它們的操作方式不同。

上圖顯示了 CSS 中的同級選擇器以及它們如何定位元素。

鄰近兄弟選擇器 ( )

相鄰同級選擇器由加號 ( ) 表示，允許您將具有相同父元素的另一個元素定位到緊鄰的元素之後。這意味著它只會定位直接出現在指定元素之後的第一個同級元素，從而允許精確且上下文敏感的樣式，而無需額外的類別或 ID。

此選擇器提供了高精度，可讓您根據元素在 HTML 結構中的確切位置來設定元素的樣式。

文法：

    element1 + element2 {
      /* CSS styles */
    }

在此語法：

• element1：表示目標元素之前的元素。

• element2：表示要設定樣式的元素，必須直接接在 element1 後面。

• 加號（ ）：作為組合符，表示元素之間的特定關係。

用途：

如前所述，此選擇器的目標元素是緊接在另一個指定元素之後的元素。當您根據其直接兄弟元素設定元素樣式時，這非常有用。

• 設定表單元素的樣式：當使用者關注輸入欄位時，您可能想要突出顯示緊接其後的標籤。

    input:focus + label {
      color: blue;
    }

• 內容格式：您可以對標題後面的段落套用特殊格式。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

範例：LambdaTest 部落格頁面

讓我們考慮 LambdaTest 部落格頁面中的一個範例來展示相鄰同級選擇器的使用。

讓我們分解使用相鄰同級選擇器的不同實例：

    element1 + element2 {
      /* CSS styles */
    }

它的目標是列表項目 (

) 緊接在類別 .platform 的元素之後。在導覽選單中，此規則定位具有類別 .enterprise 的元素（緊接在 .platform 之後），並使​​用 position:relative 進行樣式設定。這允許使用絕對定位來定位 .enterprise 元素內的下拉式選單。

    input:focus + label {
      color: blue;
    }

它的目標是緊鄰類別 .login 的按鈕之後的按鈕元素。它專門為第二個按鈕設定樣式（填滿、邊框等），在登入按鈕和後續按鈕之間創建不同的視覺差異。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

它的目標是緊鄰具有類別 .button-container 的元素之後的搜尋輸入容器元素。它設定搜尋輸入容器的樣式（寬度、定位等）。

    .platform + li {
        position: relative;
    }

這是一個略有不同的用例。在這裡，相鄰同級選擇器的目標是 .search-icon * 元素，但僅當 *.search-input 元素具有焦點時（當使用者在搜尋欄中點擊時）。這樣，您可以更改圖示的顏色和大小，以便在與搜尋輸入互動時向使用者提供視覺回饋。

通用兄弟選擇器 (~)

通用同級選擇器，由波浪號 (~) 表示，允許您定位和設定共享相同父級並跟隨指定元素的元素的樣式。與僅針對直接兄弟的相鄰兄弟選擇器不同，一般兄弟選擇器影響所有後續兄弟。

文法：

一般兄弟選擇器的語法是：

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

在此語法：

• **element1：**代表參考元素。

• element2：表示目標元素，該元素緊跟著 element1 並共享同一父元素。

當您設計與 HTML 結構相關但不一定彼此相鄰的元件時，通用同級選擇器非常方便。例如，您可以使用它來設定

HTML 標記元素後面的所有段落的樣式，即使它們之間還有其他元素。

用途：

通用同級選擇器針對指定元素的所有共享同一個父元素的同級元素，無論其位置如何。

• 導航連結：使用通用同級選擇器來設定突出顯示連結後面的任何導航連結的樣式。

    element1 + element2 {
      /* CSS styles */
    }

• 清單樣式：如果您想要為特定清單項目之後的所有清單項目設定樣式，請使用通用同級選擇器。

    input:focus + label {
      color: blue;
    }

• 主題部分： 對文件中同一父級中特定部分之後的所有部分套用不同的樣式。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

範例：LambdaTest 文件頁

在LambdaTest 文件頁範例中，通用同級選擇器對.docs-category 部分中.docs-title div 後面的所有 元素進行樣式設定。這種方法有助於區分連結與其他內容並創建結構化佈局。它確保所有相關連結在視覺上分組和樣式一致，保持乾淨和有組織的設計。

在上面的範例中，CSS 規則 .docs-title ~ a * 定位 .docs-title div 之後的所有 *anchor () 元素。使用的樣式包括區塊顯示、間距邊距以及特定的文字顏色、大小和粗細。

了解這兩個同級選擇器可以在您的網頁上提供更有針對性和動態的樣​​式。然而，CSS 同級選擇器是否與所有瀏覽器相容？

瀏覽器相容性

帶有組合器的 CSS 同級選擇器在現代瀏覽器中得到廣泛支持，包括 Chrome、Firefox、Safari 和 Edge。但是，檢查與舊瀏覽器版本的兼容性並在不同瀏覽器上測試您的網站以確保行為一致仍然是一個很好的做法。

要在各種瀏覽器上測試您的網站樣式並確保一切按預期運行，請考慮使用 LambdaTest 等基於雲端的平台。它是一個人工智慧驅動的測試執行平台，可讓您在 3000 種瀏覽器和作業系統組合上大規模執行手動和自動瀏覽器相容性測試。

最佳實踐和注意事項

使用 CSS 同級選擇器可以大大增強您的網站設計。儘管如此，遵循最佳實踐並了解某些注意事項對於確保 CSS 樣式表保持高效和可維護非常重要。

組合選擇器以實現特異性

CSS 同級選擇器提供的特異性低於類別和 ID。這意味著，如果存在具有較高特異性的衝突樣式規則，則更具體的規則優先。注意衝突並確保您的同級選擇器樣式針對正確的元件。

同級選擇可以與其他 CSS 選擇器結合使用，以提高特異性並防止衝突。這可以防止在不需要的情況下套用樣式。

    element1 + element2 {
      /* CSS styles */
    }

避免過度使用同級選擇器

過度使用同級選擇器會使 CSS 更難以閱讀和管理。嘗試簡化和澄清樣式表，使它們更容易理解。考慮使用類別或嵌套項來實現更複雜的定位場景。

    input:focus + label {
      color: blue;
    }

限制選擇器的範圍

避免使用過於寬泛的選擇器，這可能會無意中設定比預期更多的元素。例如，使用 .nav-item ~ .nav-item 而不是 div ~ div 以確保僅定位相關元素。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

確保響應性和相容性

確保您的網站看起來有吸引力並且在所有裝置和瀏覽器上正常運作至關重要。在特定上下文中使用 CSS 同級選擇器時，優先考慮回應能力和廣泛相容性至關重要。

以下是一些重要的注意事項：

• **媒體查詢：**使用媒體查詢根據螢幕尺寸和裝置方向自訂您的樣式。這可確保您的網站佈局適應桌上型電腦、筆記型電腦、平板電腦和智慧型手機上的最佳檢視效果。若要跨各種裝置和瀏覽器驗證響應式設計，請使用 LambdaTest 提供的 LT 瀏覽器。此行動網站測試工具可讓您在 53 個裝置視窗上測試您的網站，確保在不同裝置上獲得一致且積極的使用者體驗。

下面的 CSS 媒體查詢針對寬度為 992 像素或更小的螢幕的樣式，通常包括處於縱向模式的平板電腦和智慧型手機。在此媒體查詢中，您可以將正文的高度調整為自動，並將 .logo-container img 的高度設定為 40px，以及其他變更。

下面的程式碼片段是媒體查詢的範例，它調整 992 像素寬或更小的螢幕的部落格文章部分佈局。它將 .blog-image-text-container * 設定為顯示為具有列方向的 Flex 容器，並將其寬度調整為 100%。 *.blog-image-container * 中的圖像的樣式設定為寬度 100% 和高度 auto。此外，*.table-of-content *使用*display: none隱藏。

結果：

以上結果顯示在 LT 瀏覽器上，以驗證您的網站在桌面、行動裝置和平板裝置上的反應能力。

要開始使用 LT 瀏覽器並測試應用程式的回應能力，只需點擊下面的下載按鈕。

觀看下面的視頻，以了解有關 LT 瀏覽器以及如何開始使用的更多資訊。

• 瀏覽器相容性：跨多個瀏覽器測試您的網站的功能和外觀，以確保您的樣式和佈局呈現一致。瀏覽器對 CSS 程式碼的解釋可能略有不同，因此測試有助於識別和解決不一致問題。如上所述，您可以使用 LambdaTest 執行跨瀏覽器測試，以驗證您的網站是否受各種瀏覽器支援並按預期運作。

透過優先考慮回應能力和相容性，您可以建立一個為所有使用者提供無縫使用者體驗的網站，無論他們的裝置或瀏覽器為何。

使用類別來提高清晰度

CSS 同級選擇器對於根據項目在 HTML 結構中的位置定位項目非常有用；但是，過度使用它們可能會導致程式碼的可維護性降低。使用類別有助於提高程式碼可讀性和長期可維護性。

想像一下您使用同等級選擇器的場景，例如：

    element1 + element2 {
      /* CSS styles */
    }

此程式碼立即定位

元素後面的所有元素。考慮一個包含許多部分的頁面，其中包含

和 作為摘要。

這裡使用 CSS 同級選擇器變得不太清楚。如果您在特定部分的

和

*之間添加另一個元素，會發生什麼？ CSS 同級選擇器可能不再定位預期的 *

對於這些部分。

使用類，您可以指定元素之間的關係，使您的 CSS 程式碼可讀且可維護。具體做法如下：

HTML：

    input:focus + label {
      color: blue;
    }

CSS：

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

在此範例中，您可以包含 .article-section、.article-title、.article-summary 等類別。現在 CSS 樣式針對這些特定的類，使程式碼更清晰易懂。使用類別可以提高程式碼的可讀性、可維護性和重複使用性。

採用此方法可確保您的 CSS 程式碼隨著您網站的發展而可維護。請記住，從長遠來看，清晰且組織良好的程式碼可以節省時間並促進與其他開發人員的協作。

結論

總之，兄弟選擇器是有效的 CSS 功能，可讓開發人員根據專案關係開發複雜且動態的樣式。本部落格重點介紹兩種類型的同級選擇器：相鄰 ( ) 和通用 (~)。

為了展示同級選擇器的實用性，我們回顧了基礎知識，包括實際範例，並研究了實際應用程式。此外，我們還強調了保持 CSS 高效且易於管理的最佳實踐和注意事項。

理解並正確使用相鄰和通用同級選擇器可以讓您改進網頁設計並開發更複雜、更具視覺吸引力的佈局。為了獲得最佳結果，請正確測試您的樣式並保持程式碼整潔且組織良好。

編碼快樂！

以上是了解 CSS 兄弟選擇器：初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！