天天育儿网 > CSS3新增属性——新增选择器（属性选择器结构伪类选择器伪元素选择器）

CSS3新增属性——新增选择器（属性选择器结构伪类选择器伪元素选择器）

时间：2023-03-26 11:59:06

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新增属性——新增选择器（属性选择器结构伪类选择器伪元素选择器）》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。