版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyyojl/article/details/82709416
高级选择器
- 选择器复习
- 伪类选择器
- 结构性伪类选择器
- 属性选择器
- 伪元素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 顾后) | |
| div[attribute*=‘o’] | 匹配属性值中有字母o |
伪元素before/after
伪元素和伪类的区别:
伪元素是元素,伪类是状态/条件
伪元素和一般的元素的区别
- 几乎没有区别
- 写法不一样
- 需要css渲染后才知道有无伪元素,不影响布局结构
- 无法被爬虫识别
伪元素的写法:
一个盒子(必须是非单标签)有两个伪元素,叫before/after
content是伪元素的内容样式,必须写
扫描二维码关注公众号，回复：
3260473 查看本文章
E:before{
content: "";
}
E:after{
content: "";
}伪元素的性质:
- :before 在正文内容前面添加文本,可以理解为标签开始内容的前面的元素
- :after 在正文内容之后,可以理解为标签的结束之前
- 行内元素,具有文本属性
- css创建的抽象元素,是一个虚拟容器
- 可以使用伪元素清除浮动
- 优点: 使代码结构html简单,方便管理(考虑使用价值,成本)
- content :”” 如果不写,伪元素不存在