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

Question

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

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

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

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

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

所以基本上我需要能够编写一个类,它将"默认只在默认嵌套在自定义内部时重新定义这些样式"

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

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

.custom .default {
  declaration: attribute;
}

我只是不确定这是否只会在默认情况下定位默认值,或者如果这将全局重新定义默认值,我还不能直接测试它因为ftp transfer还没有为我设置这个服务器.

提前感谢您对此的清晰度!

Answer 1

恩,那就对了.这将针对.defaulta .custom(在其祖先的任何一点)(小提琴)所包含的任何内容:

.custom .default {
    color: red;
}

_{参见后代组合子和其他人.}

是的,它可以覆盖.default(小提琴)指定的声明:

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

_{看看选择器的特异性.}

Answer 2

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

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

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

MDN 参考文档

.parent .child {
    /*styles*/
}

• 子选择器：它是用>字符编写的，并且仅在直接嵌套时才以子为目标，即直接子：

MDN 参考文档

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