CSS选择器中哈希字符的两种用法有什么区别？

这两个CSS选择器有什么区别？CSS选择器中哈希字符的两种用法有什么区别？

#someId 
a#someId

看起来像.会选择工作。第一个选择器意味着“选择ID为someID的元素。”第二个是什么意思？我是否认为这意味着“选择ID为someID的a”？鉴于页面上只能有一个具有给定ID的元素，指定标签后的目的是什么？第二个选择器是否获得更高的specificity？

来源

2013-11-14 Charlie Kilian

你是对的，是的第二个选择是更具体。现在正如我在下面的几个评论中所说的那样，尽管看起来没有用处，但可以在不同的页面上分享不同的元素。如果样式表是在这些页面上共享的，除了ID –

是的，第二个选择器具有更高的特异性。

#someId只是一个单一的ID，并将选择任何具有该ID的元素，而不管它是什么元素。 a#someId既是一个元素也是一个ID，使得它更具体，因为它只会选择具有该ID的锚点a元素。

有一个共同的招计算特异性和对比不同的选择，这是为了计数的ID，类和元素，如X，X，X的特异性。最具体的选择器是具有最高最左边数字的选择器（如果是平局，则移至下一个数字）。

#someId只是一个ID，所以它是1,0,0。

a#someId是一个ID和一个元素，所以它是1,0,1，因此更具体。

ID总是比类更具体，类总是比元素更具体。为了计算特异性，Psuedo-elements计算为元素，伪代数计为类。技术上256元= 1类和256类= 1个ID，但如果你有在你的方式更大的问题不用担心选择串多的事情。

唯一比ID更具体（除了包含多个ID的选择器字符串）是!important的样式或通过元素上的style属性声明的内联样式。

更多关于CSS的特异性：

来源

2013-11-14 16:04:22 Ennui

之外，区分标签名称是有意义的如果您担心通过id选择错误的元素，那么您并未使用唯一的ID，因此应该修改您的代码。 – SW4

Extpro>那么，在我的世界中，样式表在几个页面之间共享，所以它可能是第1页上的div与第2页上的另一个标签具有相同的id，但是您可能只想通过选择器将其中的一个定位到目标上... –

这是真实的:) +1 – SW4

这意味着，

选择具有一个ID someId

是一个a元素，它更具体。

来源

2013-11-14 16:04:05 canon

#someId

选择与id元素“someId”

a#someId

选择与id锚元素“someId”

首先是假设更好的方法使用的是独特的id小号如同建议的那样，以及它执行得更快的事实（CSS从右向左解析）

这不是一个关于具体是否足够具体的问题包括，在这种情况下只应使用id选择器。但是，如果存在类名称或嵌套，更高级别的选择有助于更准确地针对特定元素。但是，不要忘记，矫枉过正同矫揉造作一样糟糕 - 它关乎平衡。

来源

2013-11-14 16:05:19 SW4

第二种形式a＃someId是矫枉过正的，理论上在文档中不应该有两个具有相同id的元素。

我可以考虑使用它的一个原因是，如果您在页面中有一个元素改变了类型，但通过一些JavaScript操作维护了相同的id，并且您希望为该特定ID添加一些CSS。

例如与一些jQuery：

<style> 
p#someId { ....} 
a#someId { ....} 
</style> 

<script> 
$('#someID').replaceWith('<a id="someId">Now a link</a>'); 
</script> 
.... 

<p id='someId'>Not a link</p>

来源

2013-11-14 16:07:58 vogomatix

但在不同的页面上，仍然有可能使用相同的ID具有不同的元素... –

好点@Bartdude，我不会考虑这一点。我不会推荐它作为设计方法或任何其他方法，但绝对要记住这一点。 –

好吧，我不会建议它，但它肯定会发生一些“泛型”ID。或者即使很多人长时间在同一个网站上工作，也可能会在多个页面上使用相同的ID。但在那种情况下，选择者宁愿是一个修复而不是设计决定... –

CSS选择器中哈希字符的两种用法有什么区别？

回答

相关问题