使用CSS定位嵌套元素

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

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

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

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

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

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