LESS |没有特定父类的目标元素

Question

我有一个如下所示的HTML结构

<ul class="list list--sm">
<li class="list__item list__item--draggable">
List item 1
<ul>
<li class="list__item list__item--draggable">
List item 1.1
<ul>
<li class="list__item list__item--draggable">
List item 1.1.1
</li>
</ul>
</li>
</ul>
</li>
</ul>

这里我想针对类list__item--draggable的元素，这些元素没有类list__item--draggable的父/祖父母，即具有文本"List item 1"的元素。我想用LESS实现这一点。我不想使用>选择器，因为它可以是一个嵌套的结构，有几个div和其他元素。

我想不出一个解决办法。这能实现吗?

Answer 1

这在纯CSS中也是可能的:

.list__item--draggable:not(.list__item--draggable *) {}

试一试:

.list__item--draggable {
outline: 1px solid black;
}
.list__item--draggable:not(.list__item--draggable *) {
outline: 1px solid red;
}

<ul class="list list--sm">
<li class="list__item list__item--draggable">
List item 1
<ul>
<li class="list__item list__item--draggable">
List item 1.1
<ul>
<li class="list__item list__item--draggable">
List item 1.1.1
</li>
</ul>
</li>
</ul>
</li>
</ul>

Answer 2

这可能取决于你想要如何样式化/重新样式化子元素，但这里有一个简单的CSS示例，它只突出显示了第一个文本:

.list__item--draggable {
background: yellow;
}
ul ul,
ul ul .list__item--draggable {
background: white;
}

<ul class="list list--sm">
<li class="list__item list__item--draggable">
List item 1
<ul>
<li class="list__item list__item--draggable">
List item 1.1
<ul>
<li class="list__item list__item--draggable">
List item 1.1.1
</li>
</ul>
</li>
</ul>
</li>
</ul>

基本上，我们改变每一个出现，然后我们改变那些是子的。