問題描述

我需要做些什么才能使 [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: 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 選擇器.除了實現限制之外，理論上不可能用任意數量的屬性選擇器或任何其他類型的簡單選擇器覆蓋單個 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 選擇器具體?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！