CSS 不会覆盖继承的值

Question

我有一个包含如下内容的 Html: (div A 中的多个 div)。

<div class="a">
    <div class="b"></div>
</div>

我的 CSS 看起来像这样:

.a div {
    border: solid;
    border-width: thin;
}

.b {
    border: none;
    border-width: 0px;
    border-collapse: collapse;
}

由于某些原因，b 的值不会覆盖 a。 但是，如果我只写 a 而不是“a .div”，我将不会得到 a 中其他 div 的预期行为。

我让它工作的唯一方法是使用“重要!” (即“边界:无!重要”；)但这似乎不够优雅。

会喜欢关于那里发生的事情的任何想法..

埃胡德。

Answer 1

你的选择器是错误的。

代替

a. div {

写

div.a {

(选择类为“a”的任何 div)

代替

b {

(实际上会尝试设置所有 b 元素的样式)

使用

.b {

(表示选择“b”类定义的任何内容)

编辑(回应回应)

要选择类为“a”的 div 中的所有 div，请使用以下选择器:-

div.a div