伪类

伪类

• 伪类是选择HTML元素在特定状态下或具有特定属性的一种选择器.在 MDN 里面可以看到一共有60多个伪类了.
• 这里只记录下经常用到的或者在工作中使用过的伪类,后面用到的继续加上来.

has

A:has(B) 选择一个和B元素相关位置关系的的A元素

/* 选择含有子元素类名是p的div元素 */
div:has(.p) {
}

备注

这个选择器提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。很强大,但是现在阶段(2023-9-12)各个浏览器兼容性还不太高.

empty

用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）.

/* 语法 */
.box:empty {
}

<!-- 不包含任何子元素可以被选中。 -->
<div class="box"></div>
<!-- 含有文本不被选中 -->
<div class="box">1111。</div>
  <!-- 包含空格不被选中 -->
<div class="box"> </div>
<!--换行会被浏览器解析为空格.在HTML中,换行被视为空白字符,并且连续的空白字符会被合并为单个空格。 -->
<div class="box">
</div>
  <!-- 含有子元素不被选中 -->
<div class="box">
  <p>
  </p>
</div>

在vue模版语法中,包含换行的元素之间的空白字符会被删除。

<template>
  <div class="box">
    
  </div>
</template>
<!-- 渲染后 -->
<div class="test"></div>

not

用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

/* span元素不含有类名为foo的元素 */
span:not(.foo){
	color: aqua;
}
/* 类名为h2直接子元素类名不为foo或者bar的元素 */
.h2 > :not(.foo,.bar){
	color: red;
}

如果传递给 :not() 伪类的选择器无效或者浏览器不支持，则整个规则都将是无效的。使用:is() 伪类接受容错的选择器列表.

.h2:not(.foo,:invalid-pseudo-class)
/* :invalid-pseudo-class 规则无效,使整个规则都失效 */
.h2:not(:is(.foo,:invalid-pseudo-class))
/* 规则有效等同于 .h2:not(.foo) */

is

以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。可以简化列表选择.不能匹配伪元素

/* 有多层列表选择,一般这么写 */
ol menu ul,
ol dir ul,
ul dir menu, 
ul menu menu,{
/*  */
}
/* 用is这么写 */
:is(ol, ul) :is( menu, dir) :is(ul, menu){}

where

用法和is一样,与is不同的是where的优先级总是为0