css :has

作者：战虎天下发布日期:2025-12-20 浏览:49

/* 示例代码 */

/* 选择包含 <p> 元素的 <div> */
div:has(p) {
  background-color: yellow;
}

/* 选择包含 <a> 元素且 href 属性值为 "https://example.com" 的 <article> */
article:has(a[href="https://example.com"]) {
  border: 2px solid blue;
}

/* 选择最后一个子元素是 <li> 的 <ul> */
ul:has(li:last-child) {
  font-weight: bold;
}

解释说明

:has() 是一个 CSS 伪类，用于选择包含特定子元素或后代元素的父元素。
在第一个示例中，div:has(p) 会选择所有包含 <p> 元素的 <div>，并将背景颜色设置为黄色。
第二个示例中，article:has(a[href="https://example.com"]) 会选择包含链接到 "https://example.com" 的 <a> 元素的 <article>，并为其添加蓝色边框。
第三个示例中，ul:has(li:last-child) 会选择最后一个子元素是 <li> 的 <ul>，并将字体加粗。

:has() 伪类在 CSS 中非常有用，可以帮助我们更灵活地选择和样式化元素。

上一篇：css gap属性

下一篇：css nth