属性选择器、结构伪类选择器、伪元素选择器

2024-06-15 14:48:05

选择器

一、属性选择器

1、E[att]
作用为：选择具有att属性的E元素。
2、E[att= “val”]
作用为：选择具有att属性，且属性值等于val的E元素；属性等于值。
3、E[att^=“val”]
作用为：匹配具有att属性，且值以val开头的E元素；以某个值开头的属性值。
4、E[att$= “val”]
作用为：匹配具有att属性，且值以val结尾的E元素；以某个值结尾
5、E[att*= “val”]
匹配具有att属性，且值中含有val的元素；
可以在任意位置。
注意：它的权重为10。

二、结构伪类选择器

1、E:first-child
作用为：匹配父元素中的第一个子元素E。
2、E:last-child
作用为：匹配父元素中最后一个E元素。
3、E:nth-child(n)
作用为：匹配父元素中的第n个子元素E。
注意：
（1）、n可以是数字、关键字和公式。
（2）、n如果是数字，就是选择第几个。
（3）、常见的关键词有even偶数 odd奇数。
（4）、常见的公式如下(如果n是公式，则从0开始计算)。
（5）、但是第0个元素或者超出了元素的个数会被忽略。
（6）、ul里面我们只允许放li，所以nth-shlid和nth-of-type就一样了。
扒了个图…公式如下：

4、E:first-of-type
作用为：指定类型E的第一个。
5、E:last-of-type
作用为指定类型E的最后一个。
6、E:nth-of-type(n)
作用为：指定类型E的第n个。
注意：结构伪类选择器的权重为10。

三、伪元素选择器

1、::before
作用为：在元素内部的前面插入内容
2、::after
作用为：在元素内部的后面插入内容
注意：
1、before 和after必须有content属性。
2、before在内容的前面，after在内容的后面。
3、before和after创建一个元愫，但是属于行元素。
4、因为在dom里面看不见刚才创建的元素，所以我们称为伪元素。
5、伪元素和标签选择器一样，权重为1。
举个例子：

效果图：

[^1]：这就是关于这三个选择器的相关内容，希望对你有所帮助，最后还是希望我们一起努力加油吧！

属性选择器、结构伪类选择器、伪元素选择器相关推荐

html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
CSS伪类（伪类选择器）
伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持)
小程序中的WXSS(css)选择器课程-伪类-:checked 伪类(不支持) 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/to ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类
小程序中的WXSS(css)选择器课程-伪类-:nth-last-child伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/t ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/top ...

最新文章

热门文章