css – 可以重复键入选择器以增加特异性吗?

前端之家收集整理的这篇文章主要介绍了css – 可以重复键入选择器以增加特异性吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
关于计算CSS特异性的 spec州:(大胆的)

Note: Repeated occurrences of the same simple selector are allowed and
do increase specificity.

因此,例如.class.class {}的特异性是.class {} – DEMO的两倍

但是,关于术语’简单选择器’the spec有这样的说法:(大胆的我的)

A simple selector is either a type selector or universal selector
followed immediately by zero or more attribute selectors,ID
selectors,or pseudo-classes,in any order.

因为规范说允许重复出现相同的简单选择器 – 这意味着你也可以重复type selectors.

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

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

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

解决方法

可以使用类型选择器来增加选择器的特异性,但不是常规的.其原因如下所述,但对于那些只是寻找替代方案的人来说,其中有两个.您可以在单个复合选择器中链接: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黑客一样,如果有的话,请谨慎使用它们.

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

A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.

Selectors 4

A compound selector is a sequence of simple selectors that are not separated by a combinator. If it contains a type selector or universal selector,that selector comes first in the sequence. Only one type selector or universal selector is allowed in the sequence.

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

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

>请记住,类型选择器只包含一个标识符,例如H1.这与其他在语法中有自己的区别符号的简单选择器不同,例如ID(#),类(.),伪类(:)或属性选择器([]).如果没有办法单独解析它们,您将无法拥有多个连续类型选择器.
>即使您可以链接类型选择器,例如,如果您之间有另一个简单的选择器,唯一可能的用途是作为特异性黑客,如问题中所述,这意味着您只能使用它如果所有类型选择器都相同;没有其他类型选择器的组合可以工作.

这是因为选择器假定文档语言将每个元素定义为只有一个元素类型.例如,在HTML中,h1始终是h1;它永远不会是任何其他类型的元素.要求同时具有h1和ap的元素的复合选择器永远不能匹配任何东西,因为类似[type = text] [type = password]的东西永远不能匹配不支持重复的文档语言中的任何内容属性.

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

> a:not()伪类的特殊性等于其参数.伪类本身不计算在内.这在第一个链接中提到.这意味着:非(h1)等同于h1 – 一种类型选择器的特异性.>由于元素只能是一种类型,这意味着:带有任何其他类型选择器的not()将是保证匹配.>由于复合选择器可能包含任意数量的伪类,因此您可以根据需要多次重复否定,即使否定都使用相同的类型选择器.>由于选择器不关心选择器是否在任何特定文档语言的上下文中有意义,因此只要满足选择器语法,就可以使用保证永远不匹配符合HTML文档中任何元素的类型选择器.一个类型选择器.类型选择器只包含CSS标识符,因此任何CSS标识符都是公平游戏.包含 _.

原文链接:https://www.f2er.com/css/215155.html

猜你在找的CSS相关文章