使用 CSS 定位嵌套元素答案

【问题标题】：Targeting nested elements with CSS使用 CSS 定位嵌套元素
【发布时间】：2014-09-30 17:35:24
【问题描述】：

假设我有一些深度嵌套的标记，我想用 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; }

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

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

然后在您的嵌套 html 中，您可能会执行类似的操作

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

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

【讨论】：

【解决方案2】：

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

如果您要创建一个通用类，并且希望能够在整个网站中使用而不管元素和元素在哪里，您应该只使用@ 987654321@。一个很好的例子就是.icon，您可能希望在链接、列表项、标题等上使用它。并且您希望能够在任何地方使用它们。

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

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

说“.link 是最好的，a.link 是第二好的，长选择器不好”是错误的。这一切都取决于情况。

【讨论】：

我必须为最后一句话点赞。享受您的新编辑特权！
a:first-of-type 在您不关心它的嵌套程度时非常棒。谢谢

【解决方案3】：

您的 CSS 越有针对性，它就会变得越不灵活。这是你自己的权衡。如果你要给链接一个特定的类，我很确定无论它们出现在这棵树内部还是外部，它们在视觉上都是相同的，所以你可以坚持你的第一个例子。

【讨论】：

【解决方案4】：

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

如果您只使用.link，那就更好了。这是最好的选择。

【讨论】：

Specificity is kind of a conundrum when it comes to a elements...

【解决方案5】：

a.link 是最好的方法。如果您希望某个 a.link 与其他链接不同，则需要为其添加一些权重。

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

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

【讨论】：

这可能会导致非常糟糕的分类炎病例，IMO 不值得尝试减少毫秒，甚至连输入单个字符所花费的时间都没有。