前端小菜鸟的进阶之路

CSS选择器

2020-04-13  本文已影响0人  Cissy_fba3

id选择器 #a
类选择器 .a
标签选择器 tagname
通配选择器 *
属性选择器 元素[attr]

后代选择器 .page p
子元素选择器 .page >p

交集选择器 .A.B{} 同时有A和B两个类名才生效
并集选择器 .A,.B{} A和B两个类名都生效

相邻兄弟选择器 A+B A后面紧邻的B生效
通用兄弟选择器 A~B A后面所有B生效

伪类选择器
:link 未访问过的超链接(a) 元素
:visted访问过的超链接(a)元素
:hover 鼠标悬停的元素
:active 选取点中的元素
:focus 选取获得焦点的元素

:empty 选取没有子元素的元素
:checked 选取勾选状态的input元素(只对radio和checkbox有效)
:disabled 选取禁用的表单元素
:fisrt-child 选取当前选择器下的第一个元素
:last-child 选取当前选择器下的最后一个元素
:nth-child(an+b) 首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)
:nth-last-child(an+b) 从兄弟节点中从后往前匹配处于某些位置的元素(与上一个伪类选择器相反)
:only-child 选取唯一子元素(父元素有其他子元素则不生效)
:only-of-type选取唯一的某个类型的元素

伪元素选择器
::first-line 为某个元素的第一行文字使用样式
::first-letter 某个元素中的文字第一个字或首字母
::before 某个元素之前插入一些内容
::after 某个元素之后插入一些内容
::selection对光标选中的元素添加样式
注意:伪元素选择器构造的元素是虚拟的,所以不能用js操作它

具体以及更多请看文档css选择器 MDN

上一篇 下一篇

猜你喜欢

热点阅读