CSS :has() 偽類

定義和用法

CSS :has() 偽類用于匹配具有特定兄弟元素或內部包含特定元素的任何父元素。

使用舉例：

• 根據特定兄弟元素或內部內容隱藏或顯示元素
• 如果存在特定內容，則更改布局
• 如果父元素具有特定類型的兄弟元素或內部內容，則使其外觀不同

實例

例子 1

設置緊跟在 <p> 元素之后的 <h2> 元素的樣式：

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

親自試一試

例子 2

設置內部包含 <h1> 元素的 <section> 元素的樣式，同時設置內部包含類名為 funfact 的元素的 <section> 元素的樣式：

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

親自試一試

例子 3

設置內部包含被選中的 <input> 元素的 <li> 元素（在 <ul> 中）的樣式：

ul li:has(input:checked) {
  border:2px solid maroon;
}

親自試一試

CSS 語法

:has(relative-selector-list) {
  css declarations;
}

技術細節

瀏覽器支持

表格中的數字指定了完全支持該偽類的首個瀏覽器版本。