css 常用伪类

1. 介绍

2. :not(selector)

说明：

• 不匹配 选择器列表 中的所有选择器

示例：

// 匹配不是 .active 的 div
div:not(.active) {
  // ...
}

// 多个选择器
div:not(.is-open, .is-button) {
  // ...
}

// 提升优先级
div:not(#notExistId) {
  // ...
}

2.1. :where(selector)

说明：

• 匹配 选择器列表 中的任意一个
• 不会提升选择器优先级，优先级为 0

示例：

:where(html, body, p) {
  margin: 0;
}

// 等价于
html,
body,
p {
  margin: 0;
}

2.2. :is(selector)

说明：

• 功能与 :where() 相同，但优先级为 选择器列表中最高的那个

2.3. :last-of-type

语法：

• element:last-of-type { style properties }

说明：

• 兄弟元素列表中，匹配最后一个 tagName

示例：

<div>
  <p>1</p>       
  <span>2</span>
  <p>3</p>          
  <span>4</span>
</div>

<style>
  div p:last-of-type {}    /*  匹配 3 */
  div span:last-of-type {} /*  匹配 4 */
</style>

2.4. :last-child

语法：

• :last-child { /* ... */ }

说明：

• 兄弟元素列表中，匹配最后一个元素

示例：

<div>
  <p>1</p>
  <span>2</span>
  <p>3</p>
  <span>4</span>
</div>

<style>
  div :last-child {}      /*  匹配 4 */
  div span:last-child {}  /*  匹配 4 */
</style>

参考：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child (opens new window)