如果孩子的存在较少

发布于 2025-02-07 05:07:28 字数 207 浏览 2 评论 0原文

我有一个父母div和子女。我只需要在孩子班级时才将背景颜色应用于父母。

  <div class="parent">
    <div class="child">
    <div class="morechild">
  <div>

例如，只有存在“孩子”类时，将背景颜色添加到“父”

原文

I have a parent div and child div. I need to apply background color to parent only if the child class is presents.

  <div class="parent">
    <div class="child">
    <div class="morechild">
  <div>

For example only if "child" class exists add background color to "parent"

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆光下的微笑 2025-02-14 05:07:28

最简单的方法是使用：has（）？

* {
  box-sizing: border-box;
  text-align: center;
  line-height: 1.6;
}

.child,
.morechild,
.parent {
  margin: 5px 20px;
}

.parent {
  background-color: lightgrey;
  border: 1px solid black;
  margin-bottom: 10px;
}

.child {
  background-color: #00000050;
}

.morechild {
  color: white;
  background-color: #00000090;
}

.parent:has(.child) {
  background-color: red;
}

<div class="parent">
  <div class="child">child</div>
  <div class="morechild">morechild</div>
</div>
<div class="parent">
  <div class="morechild">morechild</div>
</div>

The simplest way is to use :has() ?

* {
  box-sizing: border-box;
  text-align: center;
  line-height: 1.6;
}

.child,
.morechild,
.parent {
  margin: 5px 20px;
}

.parent {
  background-color: lightgrey;
  border: 1px solid black;
  margin-bottom: 10px;
}

.child {
  background-color: #00000050;
}

.morechild {
  color: white;
  background-color: #00000090;
}

.parent:has(.child) {
  background-color: red;
}

<div class="parent">
  <div class="child">child</div>
  <div class="morechild">morechild</div>
</div>
<div class="parent">
  <div class="morechild">morechild</div>
</div>

回复收藏 0 原文

~没有更多了~