ID属性的属性选择器是否比ID选择器更加具体？

问题描述

我需要做什么来给予 [id ^ = value] 选择器与常规ID相同的特异性，为什么它不等于或大于？ （考虑到我还给它 html ）

What do I need to do to give the [id^=value] selector the same specificity as a regular ID, and why isn't it equal or greater already? (considering that I gave it html as well)

html div[id^="blue"] {
    background-color: blue
}

#blue4 {
    background-color: red
}

jsfiddle： a href =http://jsfiddle.net/bjwe6yr0/1/ =nofollow> http://jsfiddle.net/bjwe6yr0/1/

jsfiddle: http://jsfiddle.net/bjwe6yr0/1/

推荐答案

属性选择器将始终不如ID选择器特定;其特异性值不会根据属性名称而更改。选择器仅将特定属性名称映射到类选择器和ID选择器;属性选择器是一个通用的概念，不包含任何这样的映射。

An attribute selector will always be less specific than an ID selector; its specificity value does not change based on the attribute name. Selectors only maps specific attribute names to class selectors and ID selectors; an attribute selector is a generic concept and does not contain any such mappings.

只有 它包含一个或多个ID选择器。除了实现限制，理论上不可能覆盖任何数量的属性选择器或任何其他类型的简单选择器的单个ID选择器。

The only way for a complex selector to have ID specificity is if it contains one or more ID selectors. Implementation limits aside, it is theoretically not possible to override even a single ID selector with any number of attribute selectors or any other type of simple selector.

这里是你的两个选择器比较：

Here is how your two selectors compare:

/* 1 attribute, 2 types -> specificity = 0-1-2 */
html div[id^="blue"] {
    background-color: blue
}

/* 1 ID                 -> specificity = 1-0-0 */
#blue4 {
    background-color: red
}

即使添加 html 也没有帮助，因为它只是一个类型选择器。将其更改为：root ，您会得到一个与类别特定于属性选择器的伪类，因此仍然比ID更少。

Even the addition of html doesn't help because it's just a type selector. Change it to :root and you get a pseudo-class which is equally specific to an attribute selector, and thus still less specific than an ID.

这篇关于ID属性的属性选择器是否比ID选择器更加具体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！