可以重复选择类型以增加特异性吗？

Question

该规范对于计算CSS具体规定:(粗体雷)

注意:允许重复出现相同的简单选择器,并增加特异性.

因此,例如,.class.class {}具有两倍的特异性比.class {}- DEMO

但是,关于术语" 简单选择器 " ,规范有这样的说法:(大胆的)

一个简单的选择器是一个类型选择器或通用选择器,后面紧跟零个或多个属性选择器,ID选择器或伪类,任何顺序.

所以,既然规范说允许重复出现相同的简单选择器 - 这意味着你也可以重复类型选择器.

那么很明显这样的事情是行不通的:h1h1 { },

所以我试过这个:h1[]h1[] {}- 哪个也不起作用,

所以我想知道是否有办法做到这一点？

Answer 1

可以使用类型选择器来增加选择器的特异性,但不是常规的.其原因如下所述,但对于那些只是寻找替代方案的人来说,其中有两个.您可以:not()在单个复合选择器中链接包含类型选择器的伪类:

h1                      {} /* 1 type  -> specificity = 0-0-1 */
h1:not(_)               {} /* 2 types -> specificity = 0-0-2 */
h1:not(_):not(_)        {} /* 3 types -> specificity = 0-0-3 */
h1:not(_):not(_):not(_) {} /* 4 types -> specificity = 0-0-4 */

或者,如果您需要支持不支持的旧版浏览器:not(),您可以在复杂选择器的开头添加冗余类型选择器,例如html和body,尽管在这种情况下您可能无法考虑到所有元素:

h1                {} /* 1 type  -> specificity = 0-0-1 */
body h1           {} /* 2 types -> specificity = 0-0-2 */
html body h1      {} /* 3 types -> specificity = 0-0-3 */
html body tr > td {} /* 4 types -> specificity = 0-0-4, assumes every td is a child of tr */

不用说,这些被认为是特异性黑客攻击; 与所有其他CSS黑客一样,如果有的话,请谨慎使用它们.

复合选择器在所有其他简单选择器之前最多只能有一个类型选择器.从选择器3(称为一系列简单选择器):

甲简单选择的序列是不是由一个组合子分隔的简单选择器的链.它始终以类型选择器或通用选择器开头.序列中不允许使用其他类型选择器或通用选择器.

和选择者4:

阿化合物选择是不是由一个组合子分隔的简单选择的序列.如果它包含类型选择器或通用选择器,则该选择器在序列中排在第一位.序列中只允许使用一个类型选择器或通用选择器.

只有类型和通用选择器符合此规则; 你可以结合并重复其他简单的选择器来提高特异性.也许这个规范可能会在关于计算特异性的部分提醒读者这一点,但我不认为这是绝对必要的.

这条规则的原因从未明确说明,但推断相当容易:

• 请记住,类型选择器只包含一个标识符,例如h1.这与其他在语法中具有自己的区别符号的简单选择器不同,例如ID(#),class(.),伪类(:)或属性选择器([]).如果没有办法单独解析它们,您将无法拥有多个连续类型选择器.

• 即使你可以链式选择器,例如,如果你之间有另一个简单的选择器,唯一可能的用途是作为特异性黑客,如问题中所述,这意味着你只能使用它,如果所有类型选择器都是一样的; 没有其他类型选择器的组合可以工作.

  这是因为选择器假定文档语言将每个元素定义为只有一个元素类型.例如,在HTML中,a h1始终是h1; 它永远不会是任何其他类型的元素.化合物选择要求性的元素既是h1以及一个p永远无法匹配任何内容,对于同样的原因,类似的[type=text][type=password]不能匹配,不支持重复属性的文件语言的任何东西.

但是,考虑到上述要点,仍然可以创建一个复合选择器,它包含多个特定的类型选择器 - 通过使用:not()伪类:

• :not()伪类的特殊性等于其参数.伪类本身不计算在内.这在第一个链接中提到.这意味着特异性:not(h1)相当于h1- 一种类型选择器.

• 由于元素只能是一种类型,这意味着:not()任何其他类型的选择器都是有保证的匹配.

• 由于复合选择器可以包含任意数量的伪类,因此您可以根据需要多次重复否定,即使否定都使用相同的类型选择器.

• 由于选择器不关心选择器在任何特定文档语言的上下文中是否有意义,因此您可以使用类型选择器,该类型选择器保证永远不会匹配符合标准的HTML文档中的任何元素,只要它满足选择器语法即可.类型选择器.类型选择器只包含CSS标识符,因此任何CSS标识符都是公平游戏.包括_.