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

Question

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

#someId
a#someId

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

Answer 1

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

#someId 只是一个单独的 ID，它将选择具有该 ID 的任何元素，而不管它是什么元素。 a#someId 既是一个元素又是一个 ID，使其更加具体，因为它只会选择具有该 ID 的 anchor a 元素。

计算特异性和比较不同选择器的特异性有一个常用的技巧，就是统计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 特异性的更多信息:

• Specifics on CSS Specificity (CSS Tricks)
• CSS Specificity (Smashing Mag)
• CSS Specificity (MDN)
• Understanding CSS Specificity (Nettuts)