目录
1.属性选择器
2. 结构伪类选择器
nth-child(n)
nth-of-type(n):
nth-child和nth-of-type的区别
3. 伪元素选择器
1.属性选择器
注意:类选择器,属性选择器,伪类选择器 权重都是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)
n可以是数字就是选择第几个子元素,从1开始n可以是关键字 :even偶数odd奇数n可以是公式如果n是公式,从0开始计算,但是第0个元素或者超出了元素个数会被忽略
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):
<!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>
效果:
如果觉得《CSS3新增属性——新增选择器(属性选择器 结构伪类选择器 伪元素选择器)》对你有帮助,请点赞、收藏,并留下你的观点哦!