web前端—前端三剑客之css(5)：伪类选择器

目录

伪类选择器

之状态类

之结构类

之属性类

幽灵元素

---

选择器见：

https://blog.youkuaiyun.com/JBY2020/article/details/109633720

https://blog.youkuaiyun.com/JBY2020/article/details/111301327

https://blog.youkuaiyun.com/JBY2020/article/details/110252340

伪类选择器

css伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字。

之状态类

:checked ：该伪类表示表单元素被选中的状态，可以用于单选按钮，复选框等元素上

:hover ：该伪类表示表单元素、链接等元素被激活的状态，此处被激活的概念比较特殊（对于输入框而言，是鼠标左键按下且未抬起的时候；对于a元素，也是鼠标左键按下且未抬起的时候）

:focus ：该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发

:link /* 未访问链接 */

:visited /* 已访问链接 */

:hover /* 用户鼠标悬停 */

:active /* 激活链接 */

之结构类

:nth-child(n) ：这个 CSS 伪类首先找到伪类前选择器选中的元素的所有兄弟元素，然后按照位置先后顺序从1开始排序，选择第（n）个元素。不写时默认为1

注：此处圆括号内的数字可以用如下公式描述: a*n+b

n=1，2，3...

例如:nth-child(2n-1)

a*n 必须写在 b 的前面，不能写成 b+a*n 的形式。

:nth-last-child(n) ：它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处

:nth-of-type(n) ：这个选择器匹配那些在伪类前所选中的元素的相同兄弟节点中的位置与 :nth-of-type()括号中 匹配的元素

:nth-last-of-type(n) ：它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处

:first-child：选择在父元素中第一个（且必须是第一个)出现的元素

:first-of-type：选择在父元素中第一个出现的元素，而不管其在兄弟内的位置如何

之属性类

[attribute]  ：选择某个属性的所有元素

[attribute = value ]  ：选择某个属性的属性值为value的元素，进行精准匹配

[attribute ~= value ] ：选择某个属性的属性值中包含value的元素

[attribute ^= value ] ：选择某个属性的属性值中以value开头的元素

[attribute $= value ] ：选择某个属性的属性值中以value结尾的元素

[attribute *= value ] ：选择某个属性的属性值中包含value字符串的元素

幽灵元素

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素

::after创建一个伪元素，其将成为匹配选中的元素的最后一个子元素

伪元素的content 样式用于在元素的 ::before 和 ::after 伪元素中插入内容。伪元素的目的即为现有选中的元素内部增加第一子元素和最后一个子元素，目的是为了能够增加显示的内容，所以伪元素一定要有content样式来激活伪元素，哪怕content样式的内容是空着的“”，也得加上去，一旦没有写content样式，伪元素即失效

这个虚拟元素默认是行内元素

注意: 由::before 和::after 生成的伪元素包含在元素格式框内(即开始和结束标签之间)， 因此不能应用在替换元素上， 比如<img>或<input> 元素。

• content样式值种类
• none不会产生伪类元素
• normal :效果同上
• 文本内容：展示字符内容
• url()：URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位符（比如无图片标志）。

伪元素不会影响结构选择器（伪元素无法通过其他选择器选中）

伪元素不会被搜索引擎收录，不会影响网页的SEO（网站排名优化）