在选择器ID上使用CSS选择器的特定性？

在课堂上，我们被教导要避免在HTML中创建ID，以便您可以使用它们来标识CSS文件中的元素。相反，我们必须尽可能地使用选择符特定性。在选择器ID上使用CSS选择器的特定性？

就拿这个简单的HTML：

<body> 
    <div> 
    <div> 
     <div> 
      The div you want to style. 
     </div> 
    </div> 
    </div> 
</body>

是更好地使用：

body > div > div > div{ 
    color: blue; 
}

或使元素的ID（让我们 '中间'），并使用此：

#middle{ 
    color: blue; 
}

明智的性能和可用性有什么区别（如果有的话）？

来源

2013-04-20 Jenthe

CSS：类大部分时间（不是全部）。在表单元素中，ID仍然是必要的，可以将它们与它们的标签（具有相同值的for属性），JS等关联起来。 – FelipeAls 2013-04-20 10:59:50

这个问题涉及某些教学而不提及给出的参数，并且它会提出一个关于喜好的抽象问题基于错误的教学。 – 2013-04-20 11:11:50

现代浏览器中ID和类之间的速度差异在真实世界中是如此微不足道，这实际上不是问题。因此，目前的主线思想是使用需要额外清晰度和特殊性的类。这样你就避免了特殊的战争，并且平衡了代码纯度的可维护性。

<body> 
    <div> 
    <div class="more-specific-if-needed"> 
     <div class="middle"> 
      The div you want to style. 
     </div> 
    </div> 
    </div> 
</body> 

.make-more-specific-if-needed .middle { 
    /* cool styles */ 
}

甚至使用链式选择器来获得额外的特定性。然后，您可以将样式拆分为单独的基于结构的构建样式和基于外观的主题样式。

<body> 
    <div> 
    <div> 
     <div class="semantic-role theme"> 
      The div you want to style. 
     </div> 
    </div> 
    </div> 
</body> 

.semantic-role.theme { 
    /* cool styles */ 
}

对于进一步阅读：

来源

2013-04-20 10:04:56 Timidfriendly

性能明智的是，通过它的id得到一个元素的速度要快于遍历dom。

从可用性的观点我会小心使用太多的ID，因为它们只能用于一个元素一次。

所以这是一个你认为更重要的问题，以及我们正在讨论的项目数量。 速度增益是否值得重新使用的丢失

来源

2013-04-20 08:35:33

更好地使用ID。性能差异很小，而不是重要的一点。我认为代码可读性/可维护性更重要。

使用ID的一个优点是，您可以将元素移动到页面的不同部分，并保留它的样式规则 - 不包含包含元素。

来源

2013-04-20 08:39:23

在选择器ID上使用CSS选择器的特定性？

回答

相关问题