跳到主要内容

CSS :has伪类

CSS的:has伪类是一个强大的选择器，它允许你根据子元素的状态或内容来选择父元素。这个选择器在CSS中非常有用，尤其是在你需要根据子元素的条件来样式化父元素时。

什么是:has伪类？​

:has伪类是CSS中的一个功能强大的选择器，它允许你选择包含特定子元素的父元素。这个选择器的语法如下：

css
parent:has(child) {
  /* 样式规则 */
}

在这个语法中，parent是你想要选择的父元素，而child是你想要匹配的子元素。如果parent元素包含child元素，那么parent元素将被选中并应用相应的样式。

代码示例​

让我们通过一个简单的例子来理解:has伪类的工作原理。

html
<div class="parent">
  <p>这是一个段落。</p>
</div>

<div class="parent">
  <span>这是一个span。</span>
</div>
css
.parent:has(p) {
  border: 2px solid blue;
}

在这个例子中，只有包含<p>元素的.parent元素会被选中，并应用蓝色的边框。

逐步讲解​

1. 选择包含特定子元素的父元素​

:has伪类的主要用途是选择包含特定子元素的父元素。例如，如果你只想选择包含<img>元素的<div>元素，你可以这样写：

css
div:has(img) {
  background-color: lightgray;
}

2. 结合其他选择器使用​

你可以将:has伪类与其他选择器结合使用，以创建更复杂的选择条件。例如，选择包含<a>标签且<a>标签中包含<img>标签的<li>元素：

css
li:has(a:has(img)) {
  list-style-type: none;
}

3. 嵌套使用​

:has伪类可以嵌套使用，以选择更复杂的结构。例如，选择包含<div>元素且<div>元素中包含<p>元素的<section>元素：

css
section:has(div:has(p)) {
  padding: 20px;
}

实际案例​

案例1：高亮包含特定内容的卡片​

假设你有一个卡片列表，每张卡片包含一个标题和一段描述。你希望高亮那些包含特定关键词的卡片。

html
<div class="card">
  <h2>标题1</h2>
  <p>这是一个包含关键词的段落。</p>
</div>

<div class="card">
  <h2>标题2</h2>
  <p>这是一个普通的段落。</p>
</div>
css
.card:has(p:contains("关键词")) {
  background-color: yellow;
}

在这个例子中，只有包含关键词的卡片会被高亮显示。

案例2：根据子元素的状态样式化父元素​

假设你有一个表单，表单中的某些输入字段是必填的。你希望在这些必填字段的父元素上添加一个红色的边框。

html
<div class="form-group">
  <label for="name">姓名</label>
  <input type="text" id="name" required />
</div>

<div class="form-group">
  <label for="email">邮箱</label>
  <input type="email" id="email" />
</div>
css
.form-group:has(input:required) {
  border: 2px solid red;
}

在这个例子中，只有包含必填输入字段的.form-group元素会被添加红色边框。

总结​

:has伪类是CSS中一个非常强大的选择器，它允许你根据子元素的状态或内容来选择父元素。通过结合其他选择器和嵌套使用，你可以创建非常复杂的选择条件，从而实现更精细的样式控制。

附加资源​

练习​

  1. 创建一个包含多个<div>元素的HTML页面，每个<div>元素中包含一个<p>元素。使用:has伪类选择包含<p>元素的<div>元素，并为其添加背景颜色。
  2. 修改上述练习，选择包含<p>元素且<p>元素中包含特定关键词的<div>元素，并为其添加边框。

通过完成这些练习，你将更好地理解:has伪类的用法和应用场景。