文档库

Appearance

伪类 ​

伪类默认规则 ​

CSS 里 伪类是附加条件

  • 写在选择器后面
  • 没写元素选择器，默认就是“任意元素”
css
:lang(en) {
  color: blue;
}

等价于：

css
*:lang(en) {
  color: blue;
}
//匹配所有 lang 为 en 的元素

状态伪类 ​

  • 链接伪类
css
a:link {
  color: blue;
} /* 未访问的链接 */
a:visited {
  color: purple;
} /* 已访问的链接 */
a:hover {
  color: red;
} /* 鼠标悬停 */
a:active {
  color: orange;
} /* 正在点击的状态（鼠标未弹起） */

书写时伪类顺序（LVHA【爱恨法则】）：我们希望后面的伪类可以覆盖前面的伪类样式，因为 hover 时，a 可能也处于 link 状态，我们希望生效的是 hover【特殊的在后，防止被覆盖】

link → :visited → :hover → :active

css
a:link {
  background-color: red;
}
a:visited {
  background-color: blue;
}
a:hover {
  background-color: green;
}
a:active {
  background-color: yellow;
  color: #fff;
}
  • 用户行为伪类
伪类作用
:hover鼠标悬停
:active被点击时（未弹起）
:focus获得焦点（如输入框）
:disabled被禁用
:checked单选框/复选框选中状态

结构伪类 ​

css
x:伪类

first-child / last-child /n-child(n) ​

选中x的父元素中的第一个子节点，并且类型要求是x。

css
div p:first-child

div的后代元素的p，并且p必须是其父亲的第一个、最后一个、第n个子元素

n 支持以下值：

  1. 数字 n

提示

n=1,2,3...

li:nth-child(3) { color: red; }

表示选中父元素中的第 3 个子元素。

  1. 关键词 odd / even
css
li:nth-child(odd) { background: #eee; }  /* 奇数 */
li:nth-child(even) { background: #ddd; } /* 偶数 */
  1. 公式

公式必须满足an+b,b可以为0，n从0开始

css
li:nth-child(3n) { color: orange; }      /* 每3个选一个：第3,6,9… */
li:nth-child(3n+1) { color: green; }    /* 第1,4,7… */
li:nth-child(2n+1) { background: #eee; } /* 奇数 */
li:nth-child(-3+n)/*前3个*/

first-of-type/last-of-type/nth-of-type(n) ​

css
x:nth-of-type(n)

在x的父元素中的中同类型的第n个

html
<div>
  <span>占位</span>
  <p>我是第一个 p</p>//命中
  <p>我是第二个 p</p>
</div>
css
p:first-of-type {
  color: blue;
}

nth-last-child ​

与nth-child用法相同，但是从“最后一个子元素”开始倒着数

nth-last-of-type ​

与nth-of-type用法相同，只统计同类型元素，从“最后一个同类型元素”开始倒着数，第 n 个

only-child ​

选中“父元素中只有这一个子节点”的元素

html
<ul>
  <li>只有我</li>
</ul>
css
li:only-child {
  color: red;
}

only-of-type ​

选中“父元素中，某一类型只出现一次”的元素

html
<ul>
  <li>我是唯一的 li</li>
  <div>别的标签</div>
</ul>
css
li:only-of-type {
  color: red;
}

empty ​

选中“没有任何子节点”的元素，包括文本节点、空格

html
<div></div>
css
div:empty {
  background: red;
}

否定伪类 ​

css
:not(选择器)
  • 排除指定选择器的选择器
css
button:not(.primary) {
  background: gray;
}
  • 排除指定伪类
css
.box li:not(:last-child) {
  margin-bottom: 8px;
}

:last-child修饰的是li，完整写法相当于：li:last-child

目标伪类 ​

  • 作用：目标伪类指的就是 :target，它和 URL 里的 锚点（hash） 配合使用

  • 目标群体：目标伪类主要用于存在锚点的元素。

当 URL 变成：

css
https://example.com/page.html#section2

浏览器会：

  1. 找 id="section2" 的元素
  2. 给它套上 :target，此时target伪类生效：
html
<a href="#a">到 A</a>
<a href="#b">到 B</a>

<div id="a">内容 A</div>
<div id="b">内容 B</div>
css
:target {
  background: #fffbe6;
  outline: 2px solid #faad14;
}

语言伪类 ​

它和 HTML 的 lang 属性配合，非常适合多语言网站。

css
x:lang(语言){
  
}
html
<p lang="en">Hello</p>
<p lang="zh">你好</p>
css
p:lang(en) {
  color: blue;
}

p:lang(zh) {
  color: red;
}
  • 应用：多语言排版：
css
:lang(zh) {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
:lang(en) {
  font-family: "Arial", sans-serif;
}

Examples ​

常用场景：元素之间的分割线

html
<div class="vertical-divider">
  <span>苹果</span>
  <span>香蕉</span>
  <span>葡萄</span>
</div>
css
.vertical-divider {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.vertical-divider span {
  padding: 0 10px;
  border-right: 1px solid #ccc; /* 添加竖线 */
}

.vertical-divider span:last-child {
  border-right: none;
}
  • 输出：
苹果香蕉葡萄