当前位置：首页 > news >正文

前端css学习笔记3：伪类选择器与伪元素选择器

news 2025/8/13 16:14:39

本文为个人学习总结，如有谬误欢迎指正。前端知识众多，后续将继续记录其他知识点！

前言

一、伪类选择器

1.概念

2.动态选择器（用户交互）

3.结构伪类

：first-child：选择所有兄弟元素的第一个

：last-child：选择所有兄弟元素的最后一个

：nth-child（n）：选择选择所有兄弟元素的第n个

：first-of-type：所有同类型的兄弟元素的第一个

：last-of-type：所有同类型的兄弟元素的最后一个

：nth-of-type（n）：所有同类型的兄弟元素的第n个

4.否定伪类（作排除）

实际应用场景

(1) 表单控件排除

(2) 导航菜单高亮

(3) 列表样式控制

(4) 无障碍优化

5.UI选择器

二、伪元素选择器

::first-letter

::first-line

::selection

::before

::after

前言

伪类选择器与伪元素选择器作为 CSS 中极具特色的两类选择器，伪类选择器专注于选取元素的特殊状态；伪元素选择器则着眼于元素内部的特定部分，本文将记录伪类选择器和伪元素选择器的概念、用法、实际应用场景及注意事项，希望这份笔记能为同样正在学习CSS的同学提供参考，也欢迎大家结合原课程视频深入学习，共同进步。

网课链接： https://www.bilibili.com/video/BV1p84y1P7Z5/?share_source=copy_web&vd_source=faad59aa4025692c65fca19bc4320e39

一、伪类选择器

1.概念

作用：是选中特殊状态的元素

2.动态选择器（用户交互）

注意顺序：link（未连接），visited（已访问），hover（悬停），active（激活）

对于一个未访问的超链接，处于link，然后鼠标悬浮（hover），点击激活（active），最后处于已访问（visited）

visited不能写在最后，不然，后来者居上，不会出现悬浮和激活状态（被覆盖）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>/* 访问过a元素，颜色也不会改变<a href="hhtps://www.baidu.com">去百度</a>*//* 前提是a标签的target属性是_self，在该页面跳转 *//* link和visited是超链接特有的 *//* 选中没有访问过的a元素 */a:link{color:chocolate;}/* 选中访问过的a元素 */a:visited{color:grey;}/* 选中鼠标悬浮的a元素 */a:hover{color: cadetblue;}/* 选中激活（鼠标点击不松手）状态的a元素 */a:active{color: blue;}/* 这四个有顺序：link visited hover active *//* hover与active可以用于其他元素，例如p，span等等 */p:hover{color: blueviolet;}/* 获取焦点（只有表单元素才能使用focus伪类） */input:focus{/* 输入文字颜色变成蓝色 */color: blue;}select:focus{color: aqua;}</style>
</head>
<body><a  href="https://www.baidu.com" >去百度</a><a href="https://www.jd.com" >去京东</a><br><p>前端</p><!-- 输入框 --><input type="text"><br><!-- 下拉框 --><select name="age" ><option value="under 18">18以下</option><option value="18-25">18-25岁</option><option value="26-35">26-35岁</option></select>
</body>
</html>

3.结构伪类

-child 基于其父元素的所有子代元素；-of-type 基于其父元素的所有同类型的子代元素

：first-child：选择所有兄弟元素的第一个

:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>结构伪类01</title><style>/* 后代选择器：选中div后代（儿子，孙子，。。）p元素(在div所有子元素中找)，p元素的父亲是谁无所谓，但是p必须是其父亲的第一个儿子——结构3 *//* main的p元素变色，它是div的孙子，是后代元素，是第一个 */div p:first-child{color: blue;}/* 选中p元素，p元素的父亲是谁无所谓，但是p必须是其父亲的第一个儿子——结构3 *//* 同时定义了div p:first-child和p:first-child两个选择器，前者具有更高的特异性（因为它更具体），所以即使两个规则都匹配，蓝色的规则会覆盖红色的规则。 */p:first-child{color: red;}</style>
</head>
<body><!-- 结构3 --><div><p>开发</p><!-- main表示主要内容 --><main><p>张三：98</p></main><!-- div的第二个子元素 --><p>李四：88</p><p>王五：76</p><p>赵六：68</p></div></body>
</html>

：last-child：选择所有兄弟元素的最后一个

/* 选中div的最后一个儿子元素（按照所有兄弟计算）——结构1 */div > p:last-child{        color: red;        }<!-- 结构1 --><div>        <p >张三：98</p><p>李四：88</p><p>王五：76</p><p>赵六：68  <span>99</span>  </p></div>

选择器拆解

div > p----------选择所有直接子级的 <p> 元素（必须是 <div> 的直接子元素）。

:last-child------------进一步筛选这些 <p> 中的最后一个子元素（相对于其父元素 <div>）

如果 <div> 的最后一个是其他元素（如 <span>），则不会匹配任何 <p>。

：nth-child（n）：选择选择所有兄弟元素的第n个

n的取值范围：0到正无穷

写0，不选中
写n，全选中（不用）
2*n，或者even：选中偶数元素
2*n+1，或者odd：选中奇数元素
必须写

n的取值形式：a*x+b

可以写数字（a=0），选中单个；但是不要超过兄弟元素个数
可以写表达式（固定格式a*x+b），进行一定范围选中
例如，可以写-n+5，选中前5个（n的值从0开始遍历，到n为5结束），但是不能写5-n

 /*选中div的第n个儿子p元素（按照所有兄弟计算）——结构1  */div > p:nth-child(3){color: blue;}

注意：它基于父元素中的所有子元素来计算的，而不仅仅是特定类型的子元素。它会按照子元素的顺序进行编号，然后根据选择器的规则来选择元素。

nth-child(-n+4) 的意思是选择父元素中的前 4 个子元素（包括所有类型的子元素，而不仅仅是 <p> 元素

- 第 1 个子元素是 <span>。
- 第 2 个子元素是第一个 <p>（张三）。
- 第 3 个子元素是第二个 <p>（李四）。
- 第 4 个子元素是第三个 <p>（王五）。

因此，nth-child(-n+4) 会选择这 4 个子元素，但只有其中的 <p> 元素会应用样式。

希望选择前 4 个 <p> 元素，而不是前 4 个子元素，应该使用 nth-of-type，而不是 nth-child。

<!-- 选中div的第4,3,2,1个子代p元素（先找子代元素） -->
div > p:nth-child(-n+4){background-color: burlywood;}<div><span>测试</span> <!-- 第一个子代元素 --><p>张三：98</p><p>李四：88</p><p>王五：76</p><p>赵六：68</p>
</div>
<!--在这个结构中，<span> 是第一个子元素，而 <p> 元素是从第二个子元素开始的。  -->

：first-of-type：所有同类型的兄弟元素的第一个

选中div的第一个儿子p元素（按所有同类型的兄弟计算）

选中div的第一个同类型（p元素）的（状态）子代p元素

：last-of-type：所有同类型的兄弟元素的最后一个

选中div的最后一个儿子p元素（按所有同类型的兄弟计算）

选中div的最后一个同类型（p元素）的（状态）子代p元素
只找同类型的p元素

：nth-of-type（n）：所有同类型的兄弟元素的第n个

nth-of-type 是基于特定类型的子元素来计算的，而不是所有子元素。

选中div的第n个儿子p元素（按所有同类型的兄弟计算）

选中div的第n个同类型（p元素）的（状态）子代p元素

选择器	作用	当前示例匹配结果
`div > p:last-child`	选择作为父元素最后一个子元素的直接 `<p>`	`<p>赵六：68</p>`
`div p:last-of-type`	选择父元素内同类型的最后一个 `<p>`	`<p>赵六：68</p>`
`div > p:last-of-type`	同 `:last-of-type` ，但仅限直接子级	`<p>赵六：68</p>`

4.否定伪类（作排除）

作用：排除满足括号中条件的元素
语法：not（选择器）{

属性名：属性值

}

括号里可以是类选择器，属性选择器，id选择器，结构选择器等等

实际应用场景

(1) 表单控件排除

/* 为所有非隐藏输入框添加边框 */
input:not([type="hidden"]) {border: 1px solid #ccc;
}

(2) 导航菜单高亮

/* 当前页面菜单项不加粗 */
.nav-item:not(.active) {font-weight: normal;
}

(3) 列表样式控制

/* 最后一项不加下划线 */
li:not(:last-child) {border-bottom: 1px solid #eee;
}

(4) 无障碍优化

/* 非禁用按钮悬停效果 */
button:not([disabled]):hover {background-color: #555;
}

注意事项

不支持嵌套 :not()

/* 无效写法 */
:not(:not(p)) {}

不能包含伪元素

/* 无效写法 */
:not(::before) {}

优先级计算
:not() 的优先级由其参数决定。例如：

:not(.class) 的优先级 = 类选择器（10）
:not(#id) 的优先级 = ID 选择器（100）

5.UI选择器

选中就变大，不选中就保持原状；

focus是选中变大，取消选中不变回原状

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>/* 选中的是勾选得复选框或者单选框（不能写颜色的样式） */input:checked{width: 30px;height: 40px;}/* 选中被禁用的input元素 */input:disabled{background-color:grey;}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="text"><input type="text" disabled>
</body>
</html>