CSS :has() 偽類
示例
為緊跟在 <p> 元素之後的 <h2> 元素設定樣式
h2:has(+ p) {
color: gray;
background-color: gold;
border: 2px dotted red;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
:has()
偽類匹配任何具有特定同級元素或內部包含特定元素的父元素。
使用示例
- 根據特定的同級元素或其內部內容來隱藏或顯示元素
- 如果存在特定內容,則更改事物的佈局
- 如果父元素具有某些型別的同級元素或內部內容,則使它們看起來不同
版本 | CSS4 |
---|
瀏覽器支援
表中數字表示該偽類完全支援的第一個瀏覽器版本。
偽類 | |||||
---|---|---|---|---|---|
:has() | 105 | 105 | 121 | 15.4 | 91 |
CSS 語法
:has(relative-selector-list) {
CSS 宣告;
}
更多示例
示例
為內部有 <h1> 元素的 <section> 元素設定樣式,併為內部有類名為 'funfact' 的元素的 <section> 元素設定樣式
section:has(h1) {
background-color: gold;
}
section:has(.funfact) {
color: blue;
}
自己動手試一試 »
示例
為(<ul> 中的)內部有已選中 <input> 元素的 <li> 元素設定樣式
ul li:has(input:checked) {
border:2px solid maroon;
}
自己動手試一試 »