css has

作者：°妮可罗宾发布日期:2025-12-09 浏览:23

/* 示例代码：使用 :has() 伪类选择器 */

/* 当 .container 内部包含 .target 元素时，改变 .container 的背景颜色 */
.container:has(.target) {
  background-color: yellow;
}

/* 当 a 标签内部有 img 标签时，给 a 标签添加下划线 */
a:has(img) {
  text-decoration: underline;
}

/* 当 p 标签后面紧跟着 span 标签时，改变 p 标签的字体颜色 */
p:has(+ span) {
  color: red;
}

解释说明：

:has() 是 CSS 中的一个伪类选择器，它允许你根据元素的后代、子元素或兄弟元素的存在来选择元素。
在上面的示例中：
- 第一个例子表示当 .container 内部包含 .target 元素时，.container 的背景颜色会变为黄色。
- 第二个例子表示当 <a> 标签内部包含 <img> 标签时，<a> 标签会有下划线。
- 第三个例子表示当 <p> 标签后面紧跟着 <span> 标签时，<p> 标签的文字颜色会变为红色。

上一篇：css 伪元素

下一篇：css id选择器