CSS3新增选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ovocc/article/details/120881844

本文介绍了CSS3中的新增选择器，包括属性选择器、结构伪类选择器如:nth-child(n)和:nth-of-type(n)，以及伪元素选择器的应用，如字体图标、阴影遮罩层和清除浮动等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

选择器

一.回顾一下旧的选择器
二.现在我们讲讲css3新增的选择器

一.回顾一下旧的选择器

1.基础选择器

标签选择器

即是html标签名作为选择器

举例：

 <p>标签选择器</p>

 p {
       color: yellow;
        }

这里有个p标签，给他添加样式的时候也是用的p。这种就是标签选择器

类选择器

用class属性调用class类

举例：

 <p class="one">类选择器</p>

 .one {
       color: yellow;
        }

这里的p标签类名叫做one，css给他添加样式的时候用的.+one（他的类名
）选择的他，这种就是类选择器。

id选择器

用他的id名调用它

举例：

 <p id="two">标签选择器</p>

  #two {
            color: yellow;
        }

这里的p标签类名叫做one，css给他添加样式的时候用的#+two （他的id名
）选择的他。这种就是id选择器。

通配符选择器

选取页面中所有的元素（标签），定义通配符使用星号*表示，意思是“所有的”。

比如：

* {
    margin:0;
    padding:0;
}

2.复合选择器

后代选择器

也称为包含选择器
父代元素【空格】后代元素（子代孙代都可以） {样式说明 }

比如

<p>div外面的p</p>
<div>
  <span>
    <p>div里面的p</p>
  </span>
</div>

这里有个两个p，一个在盒子外面，一个在盒子里面。若只要给盒子里面的p改变样式，可以使用后代选择器，

div p {
  color:red;
}

这样就是后代选择器。

子元素选择器

只能选择作为某个元素的最近一级子元素, 即为必须是离得最近的子元素
格式:元素1（父亲） > 元素2（孩子） {样式说明}

比如：

    <p>div外面的p</p>
    <div>
        <p>div里面的p</p>
    </div>

这里div里面的p就是他的直接子元素

   div span {
            color: yellow;
        }

并集选择器

可以选择多组标签，同时定义他们相同的样式，即为集体声明，实现“我全都要”

比如:

   <div>123</div>
    <p>456</p>
    <ul class="ping">
        <li>qwe</li>
        <li>asd</li>
        <li>zxc</li>
    </ul>

   div,
        p,
        .pig li {
            color: pink;
        }

伪类选择器

用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个，第n个元素.
伪类选择器书写最大的特点是用冒号（:）表示
eg:hover ,:first-child

3.他们的优先度

请添加图片描述

二.现在我们讲讲css3新增的选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样可以不用借助于类或id选择器
权重为10

请添加图片描述

示例代码

    <style>
        /* 1.利用属性选择器就可以不用借助类或者id选择器 */
        
        input[value] {
            /* 选择有value属性的input元素 */
            color: pink;
        }
        /* 2.属性选择器还可以选择属性=值的某些属性 */
        
        input[type="text"] {
            /* 将type=text的input选取出来 */
            color: powderblue;
        }
        /* 3.属性选择器可以选择属性值开头的某些元素 */
        
        div[class^="icon"] {
            /* 选择首先是div，然后具有class属性的必须是icon开头的这些元素 */
            color: red;
        }
        /* 4.属性选择器可以选择属性值结尾的某些元素 */
        
        section[class$="dara"] {
            color: salmon;
        }
    </style>
</head>

<body>
    <!-- 1.利用属性选择器就可以不用借助类或者id选择器 -->
    <input type="text" name="" id="" value="请输入昵称">
    <input type="text" name="" id="">
    <hr>
    <!-- 2.属性选择器还可以选择属性=值的某些属性(掌握重点) -->
    <input type="text" name="" id="" value="请输入昵称">
    <input type="password" name="" id="" value="请输入密码">
    <hr>
    <!-- 3.属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>小图标</div>
    <hr>
    <!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-dara">123</section>
    <section class="icon2-dara">456</section>
    <section class="icon3-icon">789</section>
</body>

结构伪类选择器

文档结构来选择元素，常用于根据父级选择器里面的子元素
权重为10

请添加图片描述

1.nth-child（n）

nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）
1.n 可以是数字，关键字和公式
2.n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…
3.n 可以是关键字：even 偶数，odd 奇数
4.n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

请添加图片描述

2.nth-of-type（n）

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

结构伪类选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结
注意：
1.before 和 after 创建一个元素，但是属于行内元素
2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
3.语法： element::before {}
4.before 和 after 必须有 content 属性
5.before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
6.伪元素选择器和标签选择器一样，权重为 1