CSS3基础语法与盒模型（二）CSS3选择器（2）选择器与伪元素

最新推荐文章于 2022-11-20 17:34:35 发布

i_donot_care

最新推荐文章于 2022-11-20 17:34:35 发布

阅读量234

点赞数

分类专栏：自学文章标签： html5 css3

本文链接：https://blog.csdn.net/i_donot_care/article/details/118738352

版权

本文详细介绍了CSS3的选择器，包括元素关系选择器如子选择器、相邻兄弟选择器，序号选择器如:first-child、:nth-child()，属性选择器以及CSS3新增的伪类如:empty、:focus，伪元素如::selection、::first-letter，并讲解了层叠性和选择器权重计算的规则，有助于深入理解CSS3的定位与样式应用。

摘要由CSDN通过智能技术生成

1.元素关系选择器

1）子选择器（只选择子代）：div>p,div的子标签p。当使用>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系，区别于后代选择器（所有后代，不只限于子代）

2）相邻兄弟选择器：相邻兄弟选择器 a+b，选择a后面紧邻的b元素，一般用于图片后面的文字介绍

3）通用兄弟选择器：a~b,选择a元素之后的所有同层级b元素，即使中间被隔开；行内元素不换行，块级元素换行。

2.序号选择器

1) :first-child 选择第一个子元素，是选取属于其父元素的首个子元素的指定选择器

2) :last-child 最后一个子元素，匹配属于其父元素的最后一个子元素

3) :nth-child(3) 第三个子元素，：nth-child()可以写成an+b的形式，表示从b开始每a个选一个，注意不能写b+an，2n+1等价于odd,是奇数（匹配属于其父元素的下标为奇数的子元）；2n等价于even，是偶数（配属于其父元素的下标为偶数的子元素）。

4) :nth-of-type(3) 第三个某类型子元素。将选择同种标签指定序号的子元素

:last-of-type匹配属于其父元素的特定类型的最后一个子元素；

5) :nth-last-child（3）倒数第三个子元素。匹配属于其父元素的第N个子元素的每个元素，从最后一个子元素开始计数，不论子元素的类型。不论子元素的类型可以理解为，计数时，不按类型，但是显示的时候，还是要看的

6) :nth-last-of-type(3) 倒数第三个某类型子元素。选择属于父元素的特定类型的第N个子元素，从最后一个子元素开始计数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
        }
        .box1 p:first-child{
            color: green;
        }
        .box1 p:last-child{
            color: red;
        }
        .box2 p:nth-child(3){
            color: skyblue;
        }
        .box3 p:nth-child(2n+1){
            color: springgreen;
        }
        .box4 p:nth-of-type(3){
            color: chocolate;
        }
        .box4 p:nth-of-type(3