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

伪类选择器与伪元素选择器作为 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----------选择所有直接子级 的
元素（必须是
的直接子元素）。

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

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

：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 个子元素（包括所有类型的子元素，而不仅仅是  元素

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

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

希望选择前 4 个  元素，而不是前 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 | 选择作为父元素最后一个子元素的直接

赵六：68

|
| div p:last-of-type | 选择父元素内同类型 的最后一个

赵六：68

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属性指定内容）

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