在另一个班级内时以班级为目标答案

【问题标题】：Targeting a class when inside another class在另一个班级内时以班级为目标
【发布时间】：2014-09-12 04:43:26
【问题描述】：

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

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

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

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

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

所以基本上我需要能够编写一个类，该类会说“仅当默认值嵌套在自定义内部时才在默认情况下重新定义这些样式”

真的只是在寻找这里所涉及的语法的确认。

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

.custom .default {
  declaration: attribute;
}

我只是有点不确定这是否只会在自定义内部时以默认为目标，或者这是否会全局重新定义默认值，我还不能实时测试它，因为尚未设置 ftp 传输我在这台服务器上。

提前感谢您对此的澄清！

【问题讨论】：

相信你的第一手……没错！
该代码将按原样完美运行
.custom .default 是一个后代选择器，它表示 .default 元素是 .custom 元素的后代。因此，您的第一个想法是正确的。
"我还不能实时测试它，因为尚未在此服务器上为我设置 ftp 传输"？什么？您可以打开任何在线编辑器或使用记事本创建一个 html 文件并自己进行测试-__-
太棒了，谢谢你们的确认，抱歉浪费了时间，不管是谁降级了我哈哈。我会自己测试它，但不会因为太多细节而感到无聊，在本地复制环境非常困难，所以我只是想确保我提前拥有它。 @TJ：这家公司的开发环境有一些特定的事情，使得在无法上传到 cms 的情况下很难在本地复制，如果你对一个问题如此恼火，那么忽略它不是更有意义吗然后继续？

【解决方案1】：

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

.custom .default {
    color: red;
}

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

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

【讨论】：

【解决方案2】：

所以，佳能的回答就足够了......但是，只是为了清晰你问。

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

.parent .child {
    /*styles*/
}

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

【讨论】：

【解决方案3】：

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

.custom > .default {
    declaration: attribute;
}

如果您遇到以下情况，这将很有帮助：

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

【讨论】：

【解决方案4】：

CSS 将寻找一个具有 default 类的元素，该元素封装在具有 custom 类的父节点中，任何匹配此规则的子节点都将应用样式，您可以创建任意多个只要您更改类，就可以根据需要为同一元素使用不同的主题。

所以你的代码：

.custom .default {
    declaration: attribute;
}

完全正确。

【讨论】：