您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

可以重复使用类型选择器以提高特异性吗?

可以重复使用类型选择器以提高特异性吗?

可以使用类型选择器来提高选择器的特异性,但传统上无法。其原因将在下面说明,但是对于那些只是在寻找替代方案的人,有两种。您可以: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 hack一样,请尽量少用。

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

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

和选择器4:

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

仅类型选择器和通用选择器受此规则约束;您可以组合并重复其他简单的选择器以提高特异性。规范也许可以在有关计算特异性的部分中提醒读者这一点,但我认为这不是绝对必要的。

从未明确说明此规则的原因,但可以很容易地推论出:

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

而且即使您 可以 链接类型选择器(例如,如果它们之间有另一个简单的选择器),它唯一可能的用途是作为特定性技巧,如问题中所述,这意味着您只能在以下情况下使用它:所有类型选择器都相同;类型选择器的其他组合无法正常工作。

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

但是,考虑到以上几点,仍然可以使用:not()伪类创建一个复合选择器,该选择器包含多个类型选择器以实现特异性。

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

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

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

而且由于选择器并不关心选择器在任何特定文档语言的上下文中是否有意义,因此您可以使用类型选择器,只要该选择器满足标准HTML语法中的选择器语法,就绝不会匹配该元素。类型选择器。类型选择器仅由CSS标识符组成,因此 任何CSS标识符都是fair game包括_

其他 2022/1/1 18:14:37 有368人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶