2

这两个 CSS 选择器有什么区别？

#someId
a#someId

它似乎像.选择器一样工作。第一个选择器的意思是“选择具有 ID 的元素someID”。第二个是什么意思？我是否认为这意味着“选择a具有 ID 的元素someID”？鉴于页面上只能有一个具有给定 ID 的元素，那么指定标签的目的是什么？第二个选择器是否具有更高的特异性？

4

4 回答 4

3

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

#someId只是一个 ID，无论它是什么元素，都会选择具有该 ID 的任何元素。 a#someId既是元素又是 ID，使其更加具体，因为它只会选择a具有该 ID 的锚元素。

计算特异性和比较不同选择器的特异性有一个常见的技巧，那就是计算 ID、类和 X、X、X 等元素。最具体的选择器是最左边数字最高的选择器（如果是平局，则移至下一个数字）。

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

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

ID 总是比类更具体，类总是比元素更具体。为了计算特异性，伪元素算作元素，伪类算作类。从技术上讲，256 个元素 = 1 个类和 256 个类 = 1 个 ID，但是如果您在选择器字符串中发生了这么多事情，那么您需要担心更大的问题。

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

有关 CSS 特异性的更多信息：

于 2013-11-14T16:04:22.693 回答
2

It means,

select an a element having an id someId

Yes, it's more specific.

于 2013-11-14T16:04:05.290 回答
2

#someId

选择具有id“someId”的元素

a#someId

id选择带有“someId”的锚元素

第一个是更好的方法，假设您id按照建议使用 unique s，并且它执行得更快（CSS 从右到左解析）

这不是一个关于在id包含 s 时是否足够具体的问题，在这种情况下，id应该只使用选择器。但是，如果存在类名或嵌套，则更高级别的选择有助于更准确地定位特定元素。然而，不要忘记矫枉过正和矫枉过正一样糟糕——这都是关于平衡的。

于 2013-11-14T16:05:19.873 回答
0

第二种形式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-14T16:07:58.930 回答