CSS选择直接从body连接的所有匹配节点_Css

CSS选择直接从body连接的所有匹配节点

css

CSS选择直接从body连接的所有匹配节点,css,Css,这是我的HTML，它是一种 - body - #yes1.parent - #no1.other - #no2.parent - #no3.parent - #yes2.parent - #yes3.parent - #yes4.parent 这是HTML中的等价物 <body> <div id="yes1" class="parent"> <div id="no1" class="oth

这是我的HTML，它是一种

- body
  - #yes1.parent
   - #no1.other
     - #no2.parent
       - #no3.parent
   - #yes2.parent
     - #yes3.parent
       - #yes4.parent

这是HTML中的等价物

<body>
  <div id="yes1" class="parent">
    <div id="no1" class="other">
      <div id="no2" class="parent">
        <div id="no3" class="parent"></div>
      </div>
    </div>
    <div id="yes2" class="parent">
      <div id="yes3" class="parent">
        <div id="yes4" class="parent"></div>
      </div>
    </div>
  </div>
</body>

所以我会匹配所有的是1-4，而不是匹配编号。例如

.parent > .parent

不起作用，因为它还将匹配no2和no3，因为no2的父项不是.parent，所以它们不会直接连接到body

是否有一个有效的CSS选择器可以做到这一点

检查小提琴：

我会选择选择器.parent.parent和值inherit

.parent{
  background-color: #00ff00;
}
.parent .parent{
  background-color: inherit;
}
.other{
  background-color: #ffffff;
}

这是一种简单的方法，但需要两个类：

影响只是。家长要覆盖所有这些。 Impact.parent[id^=no]隔离任何.parent中以id=no开头的div。 .家长{ 高度：50px；宽度：150px；边框：2倍纯白；填充：10px；背景：绿色； } .parent[id^=no]{ 高度：50px；宽度：150px；边框：2倍纯白；填充：10px；背景：灰色； }

你到底想干什么？构建一个导航菜单或其他什么？假设div实际上有一个以“yes”开头的ID，您可以使用div[ID^=yes]。或者您无法设置ID？我想了解是否存在可以选择该ID的选择器

.parent{
  background-color: #00ff00;
}
.parent .parent{
  background-color: inherit;
}
.other{
  background-color: #ffffff;
}