使用CSS时，选择器的具体要求如何？

Question

我想知道特定的选择器必须如何隔离CSS中的属性。 例如，如果

.samples table td{}

和

.samples td{}

针对同一件事，我应该使用哪一个？

Answer 1

从技术上讲，您可以像想要的那样具体。 您的两个示例将完全相同。

我本着现在需要的原则工作。 之所以这样做，是因为将来可能需要更加具体，并且需要覆盖我以前所做的事情。

例如，

 pa { color: red; } .test pa { color: black; } 

 <div class="test"> <p><a class="btn" href="#">LINK</a></p> </div> 

在上面的示例中，第一种样式使链接变为红色，但是无论出于何种原因，让我说一下，我希望该链接在具有唯一父类的不同页面上具有不同的颜色，我可以使用它来更具体地说明这一点，已经完成了第二种风格。

Answer 2

您正在谈论CSS特异性-这是有关CSS技巧的更多信息 。 这完全取决于您要定位的元素。

Answer 3

为隔离起见，您的层次结构应尽可能长（确保其正确），应将“ .samples table td {}”用于隔离起见，最好在CSS中使用“>”（建议但可选），如下所示： .samples>表格> td {}

Answer 4

从技术上来讲，要回答您的问题，没有规则说明您应该有多具体。 归根结底，这取决于个人选择。

但是 ，通常认为最好的做法是在可能的情况下尽可能地少具体化。 最终，这将导致CSS更加可维护和可组合（与继承相比，偏爱组成是适用于CSS的规则，而不仅仅是面向对象的编程语言）。

也就是说，这通常取决于用例。 例如，如果您正在开发小部件，则可能要使用更具体的选择器，例如以下示例：

<div class="my-login-widget">
    <input type="text" class="username">
</div>

.my-login-widget .username {
    // your styles
}

由于CSS中的限制之一，如果您具有全局.username类，则登录小部件的字段仍将继承该类声明的样式-这些限制导致了命名约定，例如BEM命名约定 ，该约定促进了结构化命名约定-导致使用类名.my-login-widget__username 。

最终，诸如BEM命名约定之类的约定减少了类名样式冲突和CSS，这更容易实现，因为您能够基于类名推断HTML的结构。