在另一个班级里面瞄准一个班级

Question

我正在创建一个具有默认样式的div，但也会根据内容为不同的样式提供各种选项。我的目标是只有嵌套在自定义类名称中才能使这些样式生效。有点难以口头解释所以我会给出一些我的意思的代码示例：

这将是默认视图的html结构：

<div>
  <div class="default"></div>
</div>

这将是自定义视图的html结构：

<div class="custom">
  <div class="default"></div>
</div>

所以基本上我需要能够写一个会说＆＃34;只有当默认嵌套在自定义内部时才会默认重新定义这些样式＆＃34;

真的只是在寻找有关此处涉及的语法的确认。

我的第一个想法是写下这样的东西：

.custom .default {
  declaration: attribute;
}

我只是不确定这是否只会在默认情况下定位默认值，或者如果这将全局重新定义默认值，我暂时无法测试它因为ftp传输还没有在这台服务器上为我设置。

提前感谢您对此的明确澄清！

Answer 1

是的，没错。这将针对.default（在其祖先的任何一点）（fiddle）所包含的任何.custom：

.custom .default {
    color: red;
}

_{请参阅the descendant combinator和others。}

是的，它可以覆盖.default（fiddle）指定的声明：

.default {
  color: green;
}
.custom .default {
  color: red; /* overrides green */
}

_{查看selector specificity。}

Answer 2

所以，佳能的答案就足够了......但是，只是为了你提出的清晰度。

您可以使用两种方法将选择器限制为仅定位嵌套元素：

• 后代选择器：它是用空格写的，并以父级内任何嵌套级别的子元素为目标：

MDN ref docs

.parent .child {
    /*styles*/
}

• 子选择器：它是用>字符编写的，只有在直接嵌套时，才会针对孩子：直接孩子：

MDN ref docs

.parent > .child {
    /*styles*/
}

Answer 3

你是对的。如果你想确保只定位直接后代，你可以这样做：

.custom > .default {
    declaration: attribute;
}

如果你有类似的话，那会很有帮助：

<div class="custom">
    <div class="default">
        <div class="default"></div>
    </div>
</div>

Answer 4

CSS将查找具有default类的元素，该类封装在具有类custom的父级中，符合此规则的任何子节点都将应用样式，您只要你改变了类，就可以为你想要的同一元素创建尽可能多的不同主题。

所以你的代码：

.custom .default {
    declaration: attribute;
}

完全正确。