比方说,我有一个我想与CSS的目标一定深度嵌套的标记。 它可以是任何东西,但例如:
<div>
<div id='someid'>
<span class='someclass'>
<a class='link' href='alink'>Go somewhere</a>
</span>
</div>
<div>
是否可以接受写一个CSS规则针对<a>
直接标签,这样的吗?
a.link { font-size: large; }
或者,这被认为是非标准的,可能在一些浏览器会失败呢? 我需要为目标的链这样每一个元素?
div div span.someclass a.link { font-size: large; }
这两个是完全可以接受的使用和答案取决于你具体的解决方案。 例如,如果你有你在哪里分享由你想保留它尽可能通用该类定义的公共属性等领域。 例如如果你有一个导航和在该区域中的路段都有一些共同的元素那些可以被定义a.link
然后在你的嵌套的HTML,你可以这样做
.someclass a.link {font-size:8px}
使文本更小。
这是一个讨论的特殊性是如何工作的文章: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
这两个是完全有效的,使用哪种方法取决于你想要做什么。
如果您正在创建要能够不管您的整个网站使用的元素, 其中元素是,你应该只使用一个泛型类.class
。 这方面的一个很好的例子是像.icon
,你可能想上的链接,列表项,标题等使用,你希望能够到处使用它们。
如果您正在创建一个类,它是专门针对/只适用于一个特定类型的元素,也最好使用元素的选择也是如此。 这方面的一个例子是要在一行上显示一个符号列表,因为该类要求HTML是一个<ul>
你应该在CSS以及明确指定。 ul.inline
。 这样,您就可以使用“内联”类名其他元素,而不会影响双方的样式。
如果你只使用了类以选择元素,但它不应该有任何通用的样式,你应该是具体的。 例如,你可能想在你的第一段#blog-post
元素要更大一些,那么你应该同时指定#blog-post
和类; #blog-post p.first
(注意,这些类型的类很少不再需要归功于先进的选择一样:first-of-type
, h2 + p
等)。
俗语说“ .link
是最好的, a.link
次最佳和长选择不好”是错误的。 这一切都取决于具体情况。
更有针对性你让你的CSS就成了不太灵活。 这是你自己的取舍。 如果你想给的链接这样的一个特定的类我敢肯定他们会在视觉上是否出现这棵树里面或外面它,所以你可以用你的第一个例子坚持相同。
它实际上是推荐使用a.link
不是长的,丑陋的第二个选项,这可能会导致特异性和性能问题。
如果你只使用它甚至更好.link
。 这是最好的选择。
a.link是做到这一点的最好办法。 如果你想一定a.link是与众不同,你需要一些体重添加到它。
a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */
后代选择(2号线)是不添加样式元素,所以应谨慎使用它们的最有效方式。 就个人而言,我使用它们,当我需要一个特定的ID /类中给予特别的风格,以全局类。