Question

所以我有一个奇怪的问题。如何创建一个选择器，根据类选择层次结构的一部分。例如，我想要像

这样的东西

<node class="start-selection">
    <node>
        <node>content affected</node>
    </node>

    <node>
        <node>content affected</node>
    </node>

    <node class="end-selection">
        <node>
            <node>content not affected</node>
        </node>
    </node>

    <node>
        <node>content affected</node>
    </node>
</node>

我在想这样的事情

.start-selection, .start-selection *:not(.end-selection, .end-selection *){
    /*styling...*/
}

但这似乎不起作用，因为你不能在：not（）伪类中使用复合选择器。我是唯一可以通过JavaScript实现此目的的方法吗？感谢。

Answer 1

仅使用CSS真的不可能。 100％。

Answer 2

使用纯CSS是不可能的，但是一个小脚本应该可以做到这一点

var els = document.querySelectorAll(".end-selection *");
for (i = 0; i < els.length; i++){
  els[i].className += " end-selection-child";
}

和CSS：

.start-selection *:not(.end-selection):not(.end-selection-child){
   background:blue;
}

演示：https://codecanister.com/Project/d547eed9/3/result

CSS选择层次结构段

2 个答案: