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

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

前言

一、伪类选择器

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>

二、伪元素选择器

作用：CSS 伪元素是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。选中元素中的一些特殊位置。
使用两个冒号

::first-letter

选中块级元素的第一个字母（汉字，字符）设置特殊样式

或者：使用span标签包裹要改变的元素，使用元素选择器

::first-line

选中块级元素的第一行设置特殊样式

会随着界面大小变化，第一行文字变化，但永远只选中第一行

::selection

选中被鼠标选择的文字设置特殊样式

注意：以下属性可以与 ::selection 一起使用：（不能与字体大小一起使用）

color
background-color
text-decoration
text-shadow

::before

在元素最开始的位置，创建一个子元素（必须用content属性指定内容，属性：值的方式）

使用 content 属性指定要插入的内容。content 的值可以是：

字符串：content: "Hello world!";
图片：content: url(myimage.jpg);
无内容：content: none;
计数器：content: counter(li);
引号：content: open-quote;
属性值：content: " (" attr(href) ")";

注意：插入的内容仍然位于指定元素内部。插入的内容会添加到元素内部的其他内容之前。

::after

在元素最后的位置，创建一个子元素（必须用content属性指定内容）

注意：插入的内容仍然位于指定元素内部。插入的内容会添加到元素内部的其他内容之后。

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

前言

一、伪类选择器