Question

我想知道具体的选择器如何用于隔离CSS中的属性。例如，如果，

.samples table td{}

和

.samples td{}

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

Answer 1

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

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

例如，

p a {
  color: red;
}
.test p a {
  color: black;
}

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

在上面的例子中，第一个样式使链接变红，但是无论出于何种原因我都希望该链接在具有唯一父类的不同页面上成为不同的颜色，我可以使用它更具体我用第二种方式做过。

Answer 2

你在谈论CSS特异性 - 这里有关于css技巧的more info。它完全取决于你所针对的元素。

Answer 3

出于隔离目的，您的层次结构应该是一样长的可能（确保其正确）你应该使用＆＃34; .samples table td {}＆＃34; 出于隔离目的使用＆＃39;＆gt;＆＃39;会更好（建议但可选）在这样的CSS： .samples＆gt;表＆gt; 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 naming convention - 导致使用的类名.my-login-widget__username。

最终，诸如BEM命名约定之类的约定导致类名称样式冲突和CSS的减少变得更容易，因为您可以根据类名推断HTML的结构。