15 - 高级选择器-CSDN博客

本文链接：https://blog.csdn.net/xyyojl/article/details/82709416

本文详细介绍了CSS中的高级选择器，包括伪类选择器，如:hover，用于在元素特定状态时应用样式；结构性伪类选择器，用于选择元素的特定子项；以及属性选择器，用于根据元素的属性来选择。此外，还深入探讨了伪元素如:before和:after的用法，它们作为虚拟容器，可以在内容前后插入元素，且不影响布局结构，常用于清除浮动或添加额外内容。

摘要由CSDN通过智能技术生成

高级选择器

选择器复习
伪类选择器
结构性伪类选择器
属性选择器
伪元素before/after

选择器复习

选择器	选择器的使用
ID选择器	`#box
类名选择器	`.box`
标签选择器	div
通配符选择器	*
多元素选择器	div,p
后代选择器	div ul li
毗邻选择器	ul li + li
关联后选择器	ul li ~ li
子元素选择器	div ul > li
伪类(状态/条件)选择器	:hover(:focus)

伪类选择器

如果我们想要某些元素处于某种状态的时候才表现出特定的样式,就使用伪类选择器

某些元素:需要加伪类的元素
某种状态:伪类选择器
特定样式:后续添加的样式

总结:

去掉伪类选择器(:hover等)也是正常选择器
谁有状态给谁加
触发状态的元素,和所改变的元素没有半毛钱关系
状态/作用的主体/样式表现

伪类选择器

伪类	某种状态
:hover	鼠标悬浮
:visited	被访问过的,特指a标签
:link	未被访问的链接
:active	被按下的状态
:focus	处于被聚焦的状态(表单元素)
:checked	表单被勾选的状态(几乎只有表单可以记录状态)
:first-line	首行状态
:first-letter	首个字
::selection	被选中的文本的样式被修改(两个冒号)
:not(select/类名)	反选,能选很多

结构性伪类选择器

当我们需要选择某个元素里面的第n个元素的时候使用

结构性伪类选择器	描述
E:nth-child(n)	从E元素的父元素中选择第n个元素,如果它是E,则设置样式
E:nth-of-type(n)	从E元素的父元素中选择第n个E元素,无视其他的元素
E:nth-last-child(n)	从E元素的父元素中选择倒数第n个元素,如果它是E,则设置样式
E:nth-last-of-type(n)	从E元素的父元素中选择倒数第n个E元素,无视其他的元素
E:nth-child(odd)	选择满足条件的奇数选择器
E:nth-child(even)	选择满足条件的偶数选择器
E:nth-last-child(odd)	选择满足条件的奇数选择器(从后面数起)
E:nth-last-child(even)	选择满足条件的偶数选择器(从后面数起)

属性选择器

其他属性怎样选择呢?如何选择自定义属性?

例子: <div attr="box"></div>

属性选择器	含义
div[attr=”box”]	具有属性名叫attr的div标签,中括号就是选择属性,更进一步的属性值也要为box
div[attr^=‘bo’]	属性值以bo开头,很方便匹配box1/box2这种(^不完全匹配,瞻前)
div[attr $=‘ox’], \| 以ox结尾的元素,很方便匹配结尾相同的元素($ 顾后)
div[attribute*=‘o’]	匹配属性值中有字母o

伪元素before/after

伪元素和伪类的区别:

伪元素是元素,伪类是状态/条件

伪元素和一般的元素的区别

几乎没有区别
写法不一样
需要css渲染后才知道有无伪元素,不影响布局结构
无法被爬虫识别

伪元素的写法:

一个盒子(必须是非单标签)有两个伪元素,叫before/after

content是伪元素的内容样式,必须写

E:before{
    content: "";
}
E:after{
    content: "";
}

伪元素的性质:

:before 在正文内容前面添加文本,可以理解为标签开始内容的前面的元素
:after 在正文内容之后,可以理解为标签的结束之前
行内元素,具有文本属性
css创建的抽象元素,是一个虚拟容器
可以使用伪元素清除浮动
优点: 使代码结构html简单,方便管理(考虑使用价值,成本)
content :”” 如果不写,伪元素不存在