CSS3 新增选择器(属性选择器、结构伪类选择器、伪元素选择器)

2024-02-04 22:14:10

CSS3 新增选择器

CSS3 给我们新增了属性选择器、结构伪类选择器、伪元素选择器。让我们可以更加便捷，更加*的选择目标元素。

一、属性选择器

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

选择符	简介
E[att]	选择具有 att 属性的 E 元素
E[att=“val”]	选择具有 att 属性且属性值等于 val 的 E 元素
E[att^=“val”]	选择具有 att 属性且属性值以 val 开头的 E 元素
E[att$=“val”]	选择具有 att 属性且属性值以 val 结尾的 E 元素
E[att*=“val”]	选择具有 att 属性且属性值含有 val 的 E 元素

E[att]：选择具有 att 属性的 E 元素

E[att=“val”]：选择具有 att 属性且属性值等于 val 的 E 元素【重点】

E[att^=“val”]：选择具有 att 属性且属性值以 val 开头的 E 元素

E[att$=“val”]：选择具有 att 属性且属性值以 val 结尾的 E 元素

E[att*=“val”]：选择具有 att 属性且属性值含有 val 的 E 元素

【注意】属性选择器的权重是 0，0，1，0。跟类选择器权重一样。选择器权重问题

二、结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器选择里面的子元素。

选择符	简介
E:firse-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	匹配指定类型E的第一个子元素
E:last-of-type	匹配指定类型E的最后一个子元素
E:nth-of-type(n)	匹配指定类型E的第n个子元素

E:firse-child 和 E:last-child：匹配第一个和最后一个子元素

E:nth-child(n)：可以选择符元素的一个或多个特定的子元素。其中括号后的参数n 可以是数字，关键字，或者是公式。

数字： 选择第n个子元素，从1开始的。

关键字： even(偶数)，odd(奇数)。

公式： 常见公式如下（n如果是公式则是从 0 开始的，但元素没有第 0 个或者n到了超出子元素个数时都会被忽略）

公式	取值
n	所有的子元素
2n	偶数
2n+1	奇数
5n	5的倍数
n+5	从第5个开始到最后
-n+5	前5个（包含第5个）

E:first-of-type、E:last-of-type、E:nth-of-type(n) 用法与E:first-child、E:last-child、E:nth-child(n)类似，区别如下：

E:first-child(n)：表示在父元素中直接找到第n个子元素，再判断它是不是给定的类型E，如果是则写的样式有效，不是则不生效。
E:first-of-type(n)：表示先把父元素中所有是类型E的子元素找出来排序，再选出找出的E子元素中的第n个，如果有则设置为相应的样式。没有则不生效。

三、伪元素选择器【重点】

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

两个重要的伪元素是::before、::after。伪元素前面是用两个冒号表示。

:: before：在元素内部的前面插入内容
:: after：在元素内部的后面插入内容

【注意几点：】

before 和 after 创建的元素属于行内元素
before 和 after 创建的元素在文档树中找不到，所以称之为伪元素
语法：element::before{}
before 和 after 必须要有 content 属性
伪元素选择器和标签选择器权重一样：0,0,0,1

伪元素选择器使用场景1：伪元素字体图标

利用伪元素制作下图：

div {
    position: relative;
    width: 200px;
    height: 35px;
    border: 1px solid red;
    margin: 5px auto;
}
div::after{
    content: '\e609';			// 下三角图标编码
    font-family: 'iconfont';	// 阿里字体图标
    position: absolute;
    top: 8px;
    right: 10px;  
}

字体图标的使用参看：CSS字体图标的使用

伪元素选择器使用场景2：仿土豆视频效果

利用伪元素为土豆视频添加鼠标进过显示遮罩层：

<style>
    .tudou {
        position: relative;
        display: inline-block;
        font-family: "iconfont";
        width: 220px;
        height: 125px;
        border: 1px solid red;
    }
    .tudou img {
        width: 100%;
        height: 100%;
    }
    .tudou::after {		// 添加伪元素
        content: "";
        display: none;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(85, 56, 56, 0.6) url(images/bofang.png) no-repeat center;
    }
    .tudou:hover::after{	// 鼠标移到tudou就让里面的after显示出来
        display: block;
    }
</style>
<body>
    <div class="tudou">
        <img src="images/shipin1.png" alt="">
    </div>
    <div class="tudou">
        <img src="images/shipin2.png" alt="">
    </div>
    <div class="tudou">
        <img src="images/shipin3.png" alt="">
    </div>
</body>

伪元素选择器使用场景3：伪元素清楚浮动

为什么要清除浮动：当父盒子没有高度，而子盒子有浮动时会出现父盒子高度为0（因为浮动的元素不占有位置），会影响下面的标准流盒子。视频链接

<style>
    .one {
        border: 1px solid red;
    }
    .one span{
        /* float: left; */	// 浮动代码
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .two {
        height: 50px;
        background-color: gray;
    }
</style>
<body>
    <div class="one">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="two"></div>
</body>

div 中子盒子浮动前：

div 中子盒子添加浮动后：

额外标签法清除浮动（隔墙法）：W3C推荐的方法

在浮动元素后添加一个空的块级元素：

<style>
    .one {
        border: 1px solid red;
    }
    .one span{
        float: left;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .cc{			// 额外标签清除左右浮动
        clear: both;
    }
    .two {
        height: 50px;
        background-color: gray;
    }
</style>
<body>
    <div class="one">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <div class="cc"></div>	// 添加的额外标签
    </div>
    <div class="two"></div>
</body>

给父级添加 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。

<style>
    .one {
        border: 1px solid red;
        overflow: hidden;	//父级添加清除浮动代码
    }
    .one span{
        float: left;
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: pink;
    }
    .two {
        height: 50px;
        background-color: gray;
    }
</style>
<body>
    <div class="one">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <div class="two"></div>
</body>

伪元素清楚浮动时额外标签法的一种升级和优化

.clearfix::after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

要清楚浮动的父元素加上类 clearfix 即可清除浮动，原理与额外标签法一样。

// 更常见的写法
.clearfix::before,.clearfix::after{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}

码农公寓