這個“被忽視”的 CSS4 選擇器，解決了一個折騰了十年的痛點
你是否也遇到過這種場景：想根據前一個元素來給當前節點寫樣式，結果被 CSS 的“只能向后看”難住了？ 說實話，我也卡在這兒過——而且不止一次。
今天我們用原生 CSS把這個問題一次性拿下：不用 hack、不拼接意大利面式選擇器、不借助 JavaScript。只是一個干凈利落的選擇器思路——它不只是一件工具，更像是一種更精細、更上下文驅動的樣式思維。
接下來，咱們逐步拆解：這個選擇器如何基于前一個兄弟節點精確選中目標，讓樣式既整潔，又足夠靈活。
原理一覽
主角登場：:has 選擇器（在 CSS4 中引入）。它是動態樣式的“瑞士軍刀”，匹配精度高，不需要 JS，因此可維護性也更強。
:has 會根據元素內部是否包含某些內容，或其后是否緊跟/存在某些條件來決定是否命中。于是，它不僅能“向前看”（例如 “如果這個 div 里有 img 就這樣寫樣式”），也能反向利用：根據后面的內容去影響前一個兄弟。
沒錯，我們終于有了 CSS 原生手段去實現這種邏輯：“如果后面出現了某個東西，就把前一個元素改一改?！?/span> 因此，你可以在不動 DOM 的前提下，保持結構與表現的解耦。
快速示例
<h2>Heading</h2>
<p>This paragraph follows the heading</p>想要只在 h2 后面緊跟著 <p> 時修改標題樣式？用 :has，寫法非常直接：
h2:has(+ p) {
margin-bottom: 0.25rem;
color: steelblue;
}這樣一來，只有在 h2 的緊鄰后面是段落時，標題才會變色并收緊下邊距?！?/span>無需加工具類、無需重排 DOM。
再深入一點
:has(+ p)的語義是：如果h2的緊鄰兄弟是p，就選中這個h2。因此，它是一個條件命中器。- 關鍵在于
+：它表示緊鄰兄弟。 - 若換成
~，則表示后續任意位置的兄弟（不是必須緊鄰），從而擴大了匹配范圍，因此更靈活也更強大：
h2:has(~ ul) {
border: 2px solid red;
}只要 h2 后面某處存在一個 <ul>，該標題就會獲得一圈紅色描邊——無需添加任何額外標記，因此在內容編輯場景中也能自然生效，與此同時仍舊保持樣式與結構的分離。
作用域限定
為了避免“牽一發而動全身”，把規則限制在容器內往往是更穩妥的做法：
.article h2:has(+ p) {
font-style: italic;
}這樣只有 .article 里的標題會被命中，從而降低樣式外溢的風險，并且提高可預測性。
為什么這對你重要？
你大概也厭倦了那些“補丁式”方案：加無意義的包裹 div、硬改 HTML 順序、甚至夾雜 JS 來兜底。 而 :has 提供的是上下文級的精度：你可以根據語義鄰接關系來寫樣式，因此布局更自適應、然而規則仍清晰、最終維護成本更低。
真實落地的幾個用法
- 表單：只在下一個輸入是
required時高亮對應的label。 - 卡片：當某張卡片后面跟著某種“卡片類型”時，增加額外間距。
- 內容排版：若標題后緊接段落則收緊外邊距；反之如果后面是圖片，就保持較大的留白。
再看一個導航的例子：我們想讓當前鏈接前一個項高亮。
<nav>
<a href="/home">Home</a>
<a href="/about" class="current">About</a>
<a href="/contact">Contact</a>
</nav>目標：當 About 處于 .current 狀態時，讓緊挨在它前面的 Home 高亮。CSS 如下：
nav a:has(+ a.current) {
color: goldenrod;
font-weight: bold;
}因為 Home恰好位于.current 的前一個兄弟位置，所以它會被高亮。因此我們無需觸碰 HTML、也不用疊加多余類名，從而保證導航結構簡潔可讀。
小小“坑點”
- 功能雖強，但也有邊界：到 2025 年，
:has在 Chrome / Firefox / Safari 15.4+ 上支持已經很穩，不過仍建議對老舊設備做一次檢查，以免出現“黑盒”問題。
最后的要點
我曾以為“CSS 不能回頭看”。而現在，有了 :has，這種“后視鏡式”判斷終于有了原生解法。 不妨在下一個項目里試試它——因此你會得到更干凈的樣式表，然而仍然具備動態的上下文行為，最終讓代碼和布局一起“呼吸”。
感謝你的閱讀。下次我們繼續分享一個小而妙的 CSS 心得。
