CSS选择器
选择符类型
- 标签选择器(span,div,h1)
- 类选择器(.className),一个元素可以有多个类名
- id选择器(#idName)
- 结构选择器
>
只包含子元素
~
兄弟元素
+
相邻兄弟元素
- 空格 后代选择器,包含所有子孙元素
- 属性选择器,例如
p[gender='man']
p[name^='abc']
以abc开头的
p[name$='abc']
以abc结尾的
p[name*='abc']
含有abc子字符串的
p[name~='abc']
含有abc这个单词的,需要与其他字符隔开
- 伪类选择器
a:link
链接默认
a:visited
已点击过
a:hover
悬浮
a:active
点击的时候
a:focus-within
当该元素或者是子孙元素获得焦点时,一个比较有趣的实现 传送门
:root
根选择器
p:empty
content为空
div:first-child
第一个子元素
- css3新增伪类选择器(常用)
h1:first-of-type
第一个h1标签元素
h1:last-of-type
最后一个h1标签元素
div:last-child
最后一个子元素
:nth-child(n)
选择第n个元素(n=1,2...)
nth-last-child(n)
选择最后n个元素(n=1,2...)
p:nth-type-of(n)
选择第n个p元素(n=1,2...)
p:nth-last-type-of(n)
选择最后第n个p元素(n=1,2...)
:not()
非,在前面选择器的基础上排除满足条件的元素
:enabled
表单控件的可用状态
:disabled
表单控件的禁用状态
:checked
单选框或复选框被选中
:target
活动的锚点
- 伪元素选择器
::first-letter
文本首字符
::first-line
文本首行
::before
元素之前
::after
元素之后
参考
- https://www.bilibili.com/video/BV1J4411D7sQ
- https://www.cnblogs.com/TMM-eng/p/9182042.html
posted @
2020-06-13 13:23
njuclc
阅读(
135)
评论()
编辑
收藏
举报