目录
1.属性选择器
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元素 |
注意: 类选择器,属性选择器,伪类选择器 权重都是10
例:
E[att]
<style>
input[type] {
background-color: pink;
}
</style>
<body>
<input type="text">
<input>
</body>
效果图
E[att="val"]
<style>
input[type="email"] {
background-color: pink;
}
</style>
<body>
<input type="text">
<input type="email">
</body>
效果图:
E[att^="val"]
<style>
input[ value^="text"] {
background-color: pink;
}
</style>
<body>
<input type="text" value="text-frist">
<input type="text" value="text-last">
<input type="text" value="email">
</body>
效果图:
E[att$="val"]
<style>
input[ value$="st"] {
background-color: pink;
}
</style>
<body>
<input type="text" value="text-frist">
<input type="text" value="text-last">
<input type="text" value="email">
</body>
效果图:
E[att*="val“]
<style>
input[ value*="xt"] {
background-color: pink;
}
</style>
<body>
<input type="text" value="text-frist">
<input type="text" value="text-last">
<input type="text" value="email">
</body>
效果图:
2. 结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素
nth-child(n)
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
- n可以是数字就是选择第几个子元素,从1开始
- n可以是关键字 :even 偶数 odd 奇数
- n可以是公式如果n是公式,从0开始计算,但是第0个元素或者超出了元素个数会被忽略
2n 偶数 2n+1 奇数 5n 5 10 15 ... n+5 从第五个开始(包含第五个)到最后 -n+5 前五个(包含第五个)
E:first-child
<!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>
ul {
list-style: none;
}
ul li {
width: 150px;
height: 30px;
margin-top: 10px;
background-color: pink;
}
ul li:first-child {
background-color: plum;
}
ul li:nth-child(2) {
background-color: aquamarine;
}
ul li:nth-child(3) {
background-color: aquamarine;
}
ul li:last-child {
background-color: bisque;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
效果图:
nth-of-type(n):
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第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>
.box {
margin-left: 20px;
}
.box p,
.box div {
width: 150px;
height: 30px;
background-color: pink;
}
.box p:first-of-type {
background-color: antiquewhite;
}
.box p:last-of-type {
background-color: aquamarine;
}
.box p:nth-of-type(4) {
background-color: coral;
}
</style>
</head>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<div>4</div>
<p>5</p>
<p>6</p>
</div>
</body>
</html>
效果图:
nth-child和nth-of-type的区别
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
- nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E , 然后再根据E找第n个孩子
值得注意 如果使用的是nth-child去寻找第四个元素,是寻找不到第四个p元素的
原因就是nth-child的序号是固定的,从第一个孩子顺序排列下来
nth-child找到第四个元素对应的不是p标签而是div标签,不匹配
.box p:nth-child(4) {
background-color: coral;
}
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<div>4</div>
<p>5</p>
<p>6</p>
</div>
效果图:
对应的nth-of-type而是按照元素 类型开始排须的,先去找队员的元素类型,再去找对应的顺序,这样就可以找到对应的元素。
.box p:nth-of-type(4) {
background-color: coral;
}
效果图:
3. 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
- ::before 在元素前面插入内容
- ::after 在元素后面插入内容
注意
- before和after创建一个元素 ,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法: element:before
- before和after必须有content属性
- before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一 样,权重为1
例:
p: :before {
position: absolute ;
right: 20px;
top: 10px;
content: ' \e91le' ;
font -size: 20px;
}
案例:
<!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>
.box {
width: 150px;
height: 40px;
margin-left: 20px;
border: 1px solid pink;
}
.box::after {
content: '>';
}
.box::before {
content: '<';
}
</style>
</head>
<body>
<div class="box">
123456
</div>
</body>
</html>
效果: