Question

这是我的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>

如果选择器是完整的正则表达式，我希望选择的类型：

body (> .parent > .parent)*

所以我会匹配所有的yes1-4并且不匹配nos。例如，

.parent > .parent

不起作用，因为它也会匹配no2和no3，它们不直接连接到body，因为#no2的父级不是.parent。

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

Answer 1

一种简单的方法，但需要2个课程：

仅影响.parent以涵盖所有这些内容。
影响.parent [id^=no]以隔离任何.parent内的以id =“no”开头的div。

.parent {
  height: 50px;
  width: 150px;
  border: 2px solid white;
  padding: 10px;
  background: green;
}
.parent [id^=no] {
  height: 50px;
  width: 150px;
  border: 2px solid white;
  padding: 10px;
  background: gray;
}

<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>

Answer 2

https://fiddle.jshell.net/m35r2995/2/

检查小提琴：

我会去选择器＆＃34; .parent .parent＆＃34;和价值＆＃34;继承＆＃34;

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

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

2 个答案: