23

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

5 回答 5

19

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

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

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

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

于 2012-05-17T23:30:55.757 回答
5

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

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

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

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

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

于 2012-05-18T00:04:09.393 回答
2

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

于 2012-05-17T23:24:09.877 回答
2

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

如果你使用 just 会更好.link。那是最好的选择。

于 2012-05-17T23:45:17.427 回答
1

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

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

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

于 2012-05-17T23:30:04.943 回答