伪类选择器

@Pseudo class

. 和普通类的可以应用在多个元素不同，伪类仅仅限定当前元素使用，所以叫伪类

. 伪元素会增加元素，伪类不增加元素

. 伪元素使用::，伪类使用:

. 更多信息，请访问 MDN - Pseudo class

超链接伪类

. 常见于超链接 <a> 桌面端应用

. <a> 使用时，需按下述顺序定义：a:link → a:visted → a:hover → a:active

. 除了超链接 <a>，部分伪类还可以作用于其它元素，如表单元素

类别	说明
:link	<a> 初始状态/为访问过；静态样式
:visited	访问过/点击后状态；较少使用
:hover	鼠标置于元素上时；使用最广泛；移动端无效
:focus	获取焦点时[使用 tab 查看获取焦点效果]
:focus-within	如果有子元素获取焦点时，即：选择包含有获得焦点元素的祖先元素
:active	单击时的状态；多用于提示；较少使用
:target	当前锚点选中时；使用 ID 指定锚点

a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

a:link,
a:visited {
  border-bottom: 1px solid #ccc;
}


a:hover,
a:focus {
  border-color: #f40;
  color: #f40;
}

a:active {
  background-color: #f40;
  color: #fff;
}

[] :hover 使用，请参考抽屉相册

[] :target 使用，请参考古诗鉴赏

[] :focus-within 使用，请参考一路有你

.wrap:focus-within {
  border-color: #ff0;
}

表单伪类

. 多用于表单元素

. 功能非常强大，很多纯CSS效果甚至可以媲美 JavaScript

. 凡是鼠标点击的联动响应，都可以使用 :checked，如标签页、轮播、导航；见后续案例

类别	说明
:focus	获取焦点 - received focus
:checked	元素选中 - checked or toggled to an on state radio (<input type="radio">) checkbox (<input type="checkbox">) option (<option> in a <select>)
:valid	验证有效 - contents validate successfully
:invalid	验证无效 - contents fail to validate
:in-range	在指定范围 - current value is within the range limits
:out-of-range	超出指定范围 - current value is outside the range limits
:disabled	元素功能被禁止生效时

input[type='text']:focus+label {
  color: #f40;
}

input[type='radio']:checked+label {
  color: #f40;
}

button {
  padding: 10px;
  border: none;
  background-color: transparent;
  font: inherit;
  color: #f40;
  cursor: pointer;
}

button:disabled {
  color: #ccc;
  cursor: not-allowed;
}

结构伪类

根据序号选择元素

类别	说明
:nth-child(n)	第几个孩子；孩子从1开始 matches elements based on the indexes of the elements in the child list according to their position
:first-child	第一个孩子 - the first element
:last-child	最后一个孩子 - the last element
:only-child	唯一的子元素/孩子

. 根据文档结构来选择，通常配合父级元素一起使用

. nth-child 可以使用关键字；odd 选中序号为奇数的孩子；even 选中序号为偶数的孩子

. nth-child 可以使用表达式 An+B；n 只能是非负数字，从0开始；n 必须是表达式的第一项 - n is all nonnegative integers, starting from 0

. 以上选择器不区分元素类型 - according to their position

:nth-child(even)//选择序号为偶数的元素
:nth-child(odd)//选择序号为奇数的元素

:nth-child(2n)//同even；选择序号为偶数的元素
:nth-child(2n+1)//同odd：选择序号为奇数的元素

:nth-child(3n)//选择序号为3、6、9等元素
:nth-child(3n+1)//选择序号为1、4、7、10等元素

:nth-child(-n+3)//前3 - 选择序号为3、2、1的元素；:nth-child(3-n)错误
:nth-last-child(-n+3)//后3

[] 表格 - 斑马纹表格

tr:nth-child(odd) {
  background-color: #dcb0ff;
}
tr:nth-child(even) {
  background-color: #faccff;
}

根据类型选择元素

类别	说明
first-of-type()	选择指定类型第一个
last-of-type()	选择指定类型最后一个
nth-of-type()	选择指定类型第几个

. 根据类型选择符合条件的元素；适合多种元素类型并存的情况

. 同样可以使用关键字或表达式

其它伪类选择器

:root

. 定义全局CSS变量，供当前 CSS 文件所有元素使用

. 借助函数 var() 使用/获取定义的变量

. 方便统一调整

. 还可以在元素上使用style定义内联CSS变量，供当前元素使用，详情请查看 CSS变量一节

//定义
:root {
  --title-h: 100px;
  --main-color-white: #f3f3f3;
  --main-color-red: #ff0f5b;
  --main-color-purple: #be01fe;
  --main-color-blue: #01b4ff;
  --main-color-green: #2dfc52;
  --main-color-orange: #ff7f50;
  --main-color-gray: #333849;
  accent-color: var(--main-color-red);
}
//使用
.warn {
  font-weight: 600;
  color: var(--main-color-red);
}

:empty

元素为空的样式

列表渲染时，如果数据为空，则给出特定样式，如不显示

也可以通过 JavaScript 实现

li {
  //
}

li:empty {
  display: none;
}

:not()

. 选中不符合条件的元素

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

元素彼此之间等间隔排列 - 最后一个 <li> 不指定 margin-right

//传统方案
ul li:not(:last-child) {
  margin-right: 10px;
}

//优化方案：使用相邻兄弟选择器实现
ul li + li {
  margin-left: 10px;
}

//优化方案：使用flex的gap实现
ul {
  display: flex;
  gap: 10px;
}

选中不属于 <header> 或 <section> 的 <h2>；范围中的 h2 不能省略

h2:not(header h2, section h2) {
  color: #f40;
}

:is()

. 为选择器列表中指定的元素分配样式；共享样式

. 后代选择器的高级用法；简化代码；而且可以容错；独立写法中，如果有一个语法错误，则所有样式都不生效；:is 则可以大胆使用

. The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

.box h1,
.box h2,
.box h3 {
  color: #f40;
}

.box :is(h1, h2, h3) {
  color: #f40;
}

//或者当前元素是哪些状态，如表单的伪类选择器
input:is(:hover, :focus) {
  border: 1px solid #f40;
  outline: none;
}

:has()

. 选中具备某种关系的元素

. 如果某个选择器有哪些选择器，则选中当前选择器

. 可以根据子元素的状态设置父元素的样式，经常被认为是父级选择器 -referred to as the parent selector；也有看作是家庭选择器，还可以匹配兄弟关系

. 本质上是一个函数，参数就是和当前元素存在父子关系或兄弟关系的选择器列表，以逗号分隔 - a comma-separated list

. 属于关系型伪类选择器的范畴-The Relational Pseudo-class

. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

[] 斑马纹 - 有 <th> 的使用背景样式

tr:has(th) {
  background-color: #fff;
}

[] 商品筛选

select:has(option[value="jd"]:checked)+.cont img.jd {
    display: block;
}

select:has(option[value="jd"]:checked)+.cont img:not(.jd) {
    display: none;
}

[] 试题分割 - 相邻的题目以实线分割

//如果包含有一个图形img和一个紧跟着图形的段落p，则选中
.card:has(img + p) {
}
   
//匹配到包含有<ol>或<ul>的文章
article:has(ol, ul) {
}
    
//选中直接兄弟是dt的dt
dt:has(+ dt){
}
   
//选中<h2>，其相邻兄弟是：<p>或类为red的<ul>
h2:has(+ p, + ul.red) {
}

//某个ID被选中时
body:has(#p0:checked) {
}

//自适应布局-没有--left-width就使用48px；当元素left处于hover状态时，定义--left-width变量为30%
.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left-width, 48px) auto;
}

.grid:has(.left:hover) {
  --left-width: 30%;
}

:where()

. 使用选择器列表|集合作为参数；某个/些元素符合选择器条件时设置对应的样式

. 对于缩短一个较长的选择器列表非常有用

. 如果样式使用比较频繁，建议定义为公共类

. The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

//为多个元素指定样式
:where(.left, .center, .right):hover {
  background: crimson;
}

//为<body>和<main>指定水平垂直居中
:where(body, main) {
  display: flex;
  justify-content: center;
  align-items: center;
}

//使用公共类更加直观
.center-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

过滤器 - filter

使用 <select> 配合相应的选择器完成对商品的过滤/筛选

使用不同的类标识不同的商品

select:has(option[value='blue']:checked)+.goods div:not(.blue) {
  display: none;
}

select:has(option[value='red']:checked)+.goods div:not(.yellow) {
  display: none;
}

select:has(option[value='yellow']:checked)+.goods div:not(.yellow) {
  display: none;
}