css 选择器总结_个人文章 - SegmentFault 思否
1. 基础选择器(1) 通配符选择器 * {}(2) 类选择器 .类名{}(3) ID选择器(具有唯一性) .ID {}(4) 元素选择器(标签选择器) div {}2. 关系选
顺晟科技
2022-11-17 12:44:48
229
(1) 通配符选择器 * {}
(2) 类选择器 .类名{}
(3) ID选择器(具有唯一性) .ID {}
(4) 元素选择器(标签选择器) div {}
(1) 后台选择器 ‘ ’ 如 div p{} div下的所有p标签都会生效
(2) 子代选择器 > 只有第一个div下的p标签生效 第二个div下的p标签不生效 div>p{}
<div>
<p><p>
<div>p</div>
</div>
(3) 相邻兄弟选择器 + p+span{} 只有我是第一个span生效
<div>
<p></p>
<span>我是第一个span</span>
<span>我是第二个span<span>
</div>
(4) 通用兄弟选择器 ~ 即兄弟级别的都可以生效
(1) 超链接相关
a. :link 超链接点击之前(只适用于a标签)
b. :visited 超链接被访问过之后(只适用于a标签)
c. :hover 鼠标悬停
d. :active 鼠标点击但不松手时
(2) :first-child 选择器 匹配父元素中的第一个子元素
(3) :last-child 选择器 匹配父元素中的最后一个子元素
(4) :nth-child(n) 选择器 匹配父元素中的第n个子元素 元素类型没有限制 n可以是数字 也可以是关键字 其中也可以将n设置为奇数,即odd 偶数为even
(5) :only-child 选择器 匹配父元素中只有一个子元素的元素
(6) :empty 选择器 匹配没有任何子元素的元素,包括文本节点
(7) :not() 选择器 匹配每个元素是不是指定的元素/选择器
(8) :focus 选择器 用于选择具有焦点的元素 一般用于input标签
(9) :checked 选择器 匹配每个选中的选中器(仅适用于单选框和复选框)
::befor 和 ::after 用于在被选元素的前面或后面添加内容 用来和content属性一起使用。
17
2022-11
17
2022-11
17
2022-11
09
2022-11
31
2022-10
22
2022-10