CSS如何：轻松地对1个祖先进行所有规则检查

Question

例如：

.main .box{
    //rules
}

这些规则会影响所有box，只要它们位于类main的标记内

假设我在此页面上有大约100个规则，并且只有在类main的标记内部才会强制执行这些规则。有没有更简单的方法来强制执行此操作，还是必须将.main放在.css中的每个规则前面？如果有办法在.css的顶部声明这个？

Answer 1

你可以尝试这个....在.main中的每个子类前放置相同的前缀，然后使用类或ID属性＆＃34;以＆＃34;开头。选择

.main [class^="main-prefix"] {}

或ID

.main [id^="main-prefix"] {}

属性选择器表示任何具有以/开头的类/ ID的元素 - 您也可以在括号前面放置一个星号但是没有必要：

.main *[id^="main-prefix"] {}

这些选择器适用于.main-prefix-box

等类

Answer 2

您必须将它们放在.css中的每个规则前面。

你可以查看像SASS或LESS这样的css预处理器，让你的生活更轻松。

Answer 3

简短的回答是“不”。在纯CSS中，您必须将.main放在文件中的每个规则之前。更长的答案是“有点”。如果您使用的是LESS或SASS之类的预处理器，则可以执行以下操作：

.main {
    .box {
        //rules
    }
    // rinse and repeat
}

那就是说，如果这是你需要预处理器的唯一东西，它可能是矫枉过正的。在许多情况下，预处理器可以帮助您更轻松地维护和编写代码（例如您的示例情况）。但是，您应根据自己的需要评估自己的需求，以确定在您的情况下是否有意义。

Answer 4

没有一种简单的方法可以为整个文件声明这一点。您必须使用SASS或LESS之类的预处理器来执行此操作。这允许您在其他选择器中嵌入CSS选择器。但它要么就是把它放在永远的选择器前面。