Question

我一直在努力想出这个，但似乎无法做到正确，也许我已经离开了我的想法，但就是这样。

我无法控制UL类名，它们就是它们。我只能更改类的名称，代码如下： -

<div class="custom-parent-div-name-changeable">
<div class="custom-child-div-name-changeable">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
</div>

我遇到的问题是UL的“名称无法更改”类具有背景和边框设置。我需要使用！important选择器删除另一个样式表中的背景和边框，因为用于为网站提供动力的软件存在限制。

主要的挫折是同一个类（“name-cant-be-changed”）在页面上使用了两次。所以我需要为“name-cant-be-changed”创建CSS，这里面是“cant-change-this”div类。 “name-cant-be-changed”的两个实例都在一个div中，类“cant-change-this”，但是有不同的父类名，例如。 “任何旧名”，如下： -

<div class="parent-div">
<div class="any-old-name">
<div class="cant-change-this">
<ul class="name-cant-be-changed">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</div>
</div>
</div>

如何为UL类创建单独的CSS“name-cant-be-changed”，它基于两者所在的父类进行渲染？

我尝试使用以下内容，使用各种类别的组合名称无效： -

.custom-child-div-name-changeable > .name-cant-be-changed {
background: none !important;
border: none !important;
}

有人可以对此有所了解吗？提前谢谢！

Answer 1

>运算符表示“前一个选择器的直接子节点”。我想你想要这样的东西：

.custom-child-div-name-changeable .name-cant-be-changed {
    background: none !important;
    border: none !important;
}

或

.custom-child-div-name-changeable > div .name-cant-be-changed {
    background: none !important;
    border: none !important;
}

或

.custom-child-div-name-changeable > div.cant-change-this .name-cant-be-changed {
    background: none !important;
    border: none !important;
}

Answer 2

或者：

.any-old-name .name-cant-be-changed {…}

或

.any-old-name > .cant-change-this > .name-cant-be-changed {…}

第一个读取：所有带有'.name-cant-be-changed'的元素，其父母的某个地方为.any-old-name。

第二个内容为：.name-cant-be-changed所有元素的直接父级为.cant-change-this且父级为.any-old-name

通过Parent Div控制CSS UL元素

2 个答案: