伪类选择器
动态伪类(锚点伪类、用户行为伪类)
UI元素状态伪类
CSS3结构伪类
否定选择器
伪元素
动态伪类
这些伪类并不存在与 HTML 中,只有当用户和网站交互的时候才能体现出来
锚点伪类
:link
:visited
用户行为伪类
:hover
:active
:focus(获取到焦点时的样式)
UI元素状态伪类
概念
我们把":enabled
", ":disabled
", "checked
"伪类称为UI元素状态伪类
CSS3结构类
CSS3的:nth
选择器
我们把CSS3的:nth
选择器也称为CSS3结构类
选择方法
:first-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:first-of-type
:last-of-type
only-child
only-of-type
:empty
Element:first-child
概念
选择属于其父元素的首个子元素,并为其设置样式
Element:last-child
概念
选择属于其父元素的最后一个子元素,并为其设置样式
Element:nth-child(N)
概念
选择属于其父元素的第N个子元素,不论元素的类型
关于参数(N)
odd 相当于2n+1
even 相当于2n
Element:nth-last-child(N)
概念
选择属于其父元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数
Element:nth-of-type(N)
概念
选择属于其父元素的特定类型的第N个子元素的每个元素
Element:nth-last-of-type(N)
概念
选择属于其父元素的特定类型的第N个子元素的每个元素,从最后一个子元素开始计数
Element:first-of-type
概念
选择属于其父元素的特定类型的首个子元素
Element:last-of-type
概念
选择属于其父元素的特定类型的最后一个子元素
Element:only-child
概念
选择属于其父元素的唯一子元素
Element:only-of-type
概念
选择属于其父元素的唯一特定类型的子元素
Element:empty
概念
选择没有子元素(包括文本节点)的每个元素
否定选择器
概念
:not(Element/selector)选择器匹配非指定元素/选择器的每个元素
语法格式
父元素:not(子元素/子选择器)
伪元素
CSS 伪元素用于向某些选择器设置特殊效果
语法格式
元素::伪元素(Element::pseudo-element)
Element::first-line
概念
根据"first-line"伪元素中的样式对 Element 元素的第一行文本进行格式化
说明
"first-line"伪元素只能用于块级元素
Element::first-letter
概念
用于向文本的首字母设置特殊样式
说明
"first-letter"伪元素只能用于块级元素
Element::before
概念
在元素的内容前面插入新内容
说明
常配合"content"配合使用
特点
第一个子元素
行级元素
内容通过 content 写入
标签中找不到对应标签,只能在浏览器开发者工具那可以找到
Element::after
概念
在元素的内容后面插入新内容
说明
常配合"content"配合使用,常用于清除浮动
Element::selection
概念
用于设置在浏览器中选中文本后的背景色与前景色
兼容性说明
::selection 在IE家族中,只有IE9+ 版本支持,在 Firefox 中需要加上其前缀"-moz"