使用CSS定位嵌套元素

假设我有一些我想用CSS定位的深层嵌套标记。它可以是任何东西，但例如：使用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; }

来源

2012-05-17 McGarnagle

两者完全可以接受使用，答案取决于您的具体解决方案。例如，如果您有其他区域在共享由该类定义的公共属性，则需要尽可能保持通用属性。例如如果你有一个导航和在该区域中的路段在嵌套的HTML分忧可以定义一些共同的要素由a.link

然后，你可能会做这样的事情

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

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

来源

2012-05-17 23:30:55 lucuma

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

来源

2012-05-17 23:24:09 ikanobori

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

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

后代选择（2号线）是不添加样式元素，所以应谨慎使用它们的最有效方式。就我个人而言，当我需要为特定ID /类中的全局类提供特殊样式时，我会使用它们。

来源

2012-05-17 23:30:04 AJMaxwell

这可能会导致一个非常糟糕的classitis病例，IMO不值得尝试减少几毫秒，这甚至不会加起来花费在输入单个字符上的时间。 – BoltClock

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

如果你只用.link就更好了。这是最好的选择。

来源

2012-05-17 23:45:17 Ana

[特征是一种难题，当谈到'a'元素...]（http://stackoverflow.com/questions/10587245/is-there-a-reason-to-use-a-instead-of -alink-or-avisited-in-my-stylesheet/10589840＃10589840） – BoltClock

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

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

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

如果您只使用类来选择元素，但它不应该有任何通用样式，您应该是特定的。例如，您可能希望#blog-post元素中的第一段较大，则应该指定#blog-post和该类; （请注意，由于像:first-of-type,h2 + p等先进的选择器，这些类型很少再需要了）。

说“.link是最好的，a.link是第二好的，长选择器是坏的”是错误的。这完全取决于情况。

来源

2012-05-18 00:04:09 powerbuoy

我不得不为你最后一句提供支持。享受您的新编辑权限！ – BoltClock

使用CSS定位嵌套元素

回答

相关问题