CSS3 新增的选择器 ::before ::after经典使用场景
文章目录
- 1.属性选择器
- 2.结构伪类选择器
- 2.1 ：nth-child(n)（重点）
- 3.伪元素选择器(重点)
- 3.1伪元素的使用场景
1.属性选择器
属性选择器可以根据元素特定属性来选择元素，这样就可以不借助于类或者id选择器。
格式一：标签名[属性名]
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
input[name] {
color: blueviolet;
}
style>
head>
<body>
<input type="text" name="search" />
<input type="text" />
body>
html>
即选择带有name属性的input标签：
格式二：标签名[属性名=“value”]
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
input[name="search"] {
color: blueviolet;
}
style>
head>
<body>
<input type="text" name="search" />
<input type="text" name="result" />
body>
html>
具体到属性值：
格式三：标签名[属性名^=“属性值前缀”]
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
div[class^="son"] {
float: left;
width: 50px;
height: 50px;
background-color: aqua;
margin: 0px 5px;
}
style>
head>
<body>
<div class="father">
<div class="son1">1div>
<div class="son2">2div>
<div class="son3">3div>
<div class="son4">4div>
div>
body>
html>
选择以属性名为class且以son开头的属性值的div标签：
格式四：标签名[属性名$=“后缀相同的属性值”]
与格式三相似，只是属性值结尾相同的即可。
格式五：[属性名=“属性值含有value的元素”]*
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
div[class*="on"] {
float: left;
width: 50px;
height: 50px;
background-color: aqua;
margin: 0px 5px;
}
style>
head>
<body>
<div class="father">
<div class="son1">1div>
<div class="isSon2">2div>
div>
body>
html>
只要属性值包含这个元素即可：
重点记住格式二。
注意：类选择器、属性选择器、伪类选择器，权重都为10.
2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素
| 选择符 | 描述 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中的最后一个子元素E |
| E:nth-child(n) | 匹配父元素中的第n个元素E, |
示例一：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
ul li:first-child {
color: blue;
}
style>
head>
<body>
<ul>
<li>第一li>
<li>第二li>
<li>第三li>
<li>第四li>
<li>第五li>
ul>
body>
html>
示例二：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
ul li:nth-child(3) {
color: blue;
}
style>
head>
<body>
<ul>
<li>第一li>
<li>第二li>
<li>第三li>
<li>第四li>
<li>第五li>
ul>
body>
html>
2.1 ：nth-child(n)（重点）
nth-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字、关键字、表达式
- n如果使数字，就选择第n个子元素
- n可以是关键字：even偶数、odd奇数
- n可以是公式；常见公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5,10,15 … |
| n+5 | 从第5个开始到最后（包含第五个） |
| -n+5 | 前五个(包含第五个) |
示例：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
ul li:nth-child(5n) {
color: blue;
}
style>
head>
<body>
<ul>
<li>第一li>
<li>第二li>
<li>第三li>
<li>第四li>
<li>第五li>
<li>第六li>
<li>第七li>
<li>第八li>
<li>第九li>
<li>第十li>
ul>
body>
html>
3.伪元素选择器(重点)
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
| 选择符 | 描述 |
|---|---|
| ::before | 在元素内部前面插入内容 |
| ::after | 在元素内部后面插入内容 |
特性：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以称为伪元素选择器
- 语法: element::before{}
- before和after必须有content属性
- before在父元素里面的前面创建元素，after在父元素里面的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
解释：
示例：
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器title>
<style>
* {
margin: 0px;
padding: 0px;
}
.father {
width: 200px;
height: 200px;
margin: 20px auto;
background-color: aquamarine;
}
.father::before {
display: inline-block;
content: " ";
width: 50px;
height: 200px;
background-color: brown;
}
.father .son {
display: inline-block;
width: 100px;
height: 100px;
background-color: blueviolet;
}
style>
head>
<body>
<div class="father">
<div class="son">div>
div>
body>
html>
3.1伪元素的使用场景
我们模仿小米的一个侧边栏(原版)：
我们之前在搭建红色边框的内容时，通常是在每个 li 标签中再添加一个带有“>”的子容器，然后通过定位布局，将它移到右边。那假如我们有很多个这样的 li 则需要添加很多这样的子容器，很明显这样会造成html结构复杂，现在我们学了伪元素，我们就用伪元素实现这个“>”，而不再添加子容器。
看代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>伪元素使用title>
<style>
.container {
position: relative;
height: 455px;
width: 265px;
padding: 30px 0px;
margin: 20px auto;
background-color: #8f8da2;
}
ul li {
list-style: none;
height: 45px;
color: #f5f5f4;
}
ul li a {
color: inherit;
text-decoration: none;
}
ul li::after {
position: absolute;
content: ">";
right: 25px;
}
style>
head>
<body>
<div class="container">
<ul>
<li><a href="#">手机 电话卡a>li>
<li><a href="#">电视 盒子a>li>
<li><a href="#">笔记本 显示器 平板a>li>
<li><a href="#">家电 插线板a>li>
<li><a href="#">出行 穿戴a>li>
<li><a href="#">智能 路由器a>li>
<li><a href="#">电源 配件a>li>
<li><a href="#">健康 儿童a>li>
<li><a href="#">耳机 音响a>li>
<li><a href="#">生活 箱包a>li>
ul>
div>
body>
html>
仅靠这么点代码就实现了每个li中包含“>"
ul li::after {
position: absolute;
content: ">";
right: 25px;
}