Question

假设我有一些深度嵌套的标记，我想用CSS定位。它可以是任何东西，但例如：

<div>
    <div id='someid'>
        <span class='someclass'>
            <a class='link' href='alink'>Go somewhere</a>
        </span>
    </div>
<div>

直接编写定位<a>标记的CSS规则是否可以接受，像这样？

a.link { font-size: large; }

或者这被认为是非标准的，在某些浏览器中可能会失败？我是否需要像这样定位链中的每个元素？

div div span.someclass a.link { font-size: large; }

Answer 1

两者都完全可以使用，答案取决于您的具体解决方案。例如，如果您有其他区域，您正在共享由该类定义的公共属性，那么您希望将其保持为尽可能通用。例如，如果您有导航，并且该区域中的链接共享一些可以由a.link

定义的公共元素

然后在你的嵌套html中，你可能会做类似

的事情

.someclass a.link {font-size:8px}使文字变小。

这篇文章讨论了特异性的工作原理：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

两者都完全有效，你使用哪一个取决于你想做什么。

如果您要创建一个通用类，希望能够在整个网站中使用该元素而不考虑元素和元素，那么您应该仅使用{ {1}}。一个很好的例子就像.class，您可能希望在链接，列表项，标题等上使用它。并且您希望能够在任何地方使用它们。

如果您要创建特定于/仅适用于某个特定类型元素的类，则最好也使用选择器中的元素。一个例子是你要在一行上显示的项目符号列表，因为这个类要求HTML为.icon，你也应该在CSS中指定它; <ul>。这样，您也可以将“内联”类名称用于其他元素，而不会影响两者。

如果您只是使用该类来选择元素，但它不应该具有任何通用样式，那么您应该具体。例如，您可能希望ul.inline元素中的第一段更大，然后您应该同时指定#blog-post 和类; #blog-post（请注意，由于#blog-post p.first，:first-of-type等高级选择器，很少需要这些类型的课程。

说“h2 + p是最好的，.link是第二好的，长选择器是坏的”是错的。这一切都取决于具体情况。

Answer 3

您制作CSS越有针对性，其灵活性就越低。这是你自己的交易。如果你要给链接一个特定的类，我很确定它们在视觉上是相同的，无论它们出现在这个树内还是在它之外，所以你可以坚持你的第一个例子。

Answer 4

实际上建议使用a.link而不是长而丑陋的第二选项，这会导致特异性和性能问题。

如果仅使用.link，情况会更好。那是最好的选择。

Answer 5

a.link是最好的方法。如果你想让某个a.link与其他链接不同，你需要增加一些权重。

a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */

后代选择器（第2行）不是向元素添加样式的最有效方法，因此请谨慎使用它们。就个人而言，当我需要为某个ID / Class中的Global Class提供特殊样式时，我会使用它们。

使用CSS定位嵌套元素

5 个答案: