为什么会引入伪类和伪元素?
翻译官方的话: 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述。
什么是伪类?
概念: 为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。
它可以用于:
- 设置鼠标悬停在元素上时的样式(:hover)
- 为已访问和未访问链接设置不同的样式(:link,:visited)
- 设置元素获得焦点时的样式(:focus)
什么是伪元素?
概念: 创建一些不在文档树中的元素,并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。)
它可以用于:
- 设置元素的首字母、首行的样式 (::first-letter,::first-line)
- 在元素的内容之前或之后插入内容 (::before,::after)
### 伪类的分类
- 状态型伪类
常见的状态伪类:
:link 应用于未被访问过的链接
:visited 应用于被访问过的链接
:active 应用于被激活的元素
:hover 应用于鼠标悬停到的元素
:focus 应用于被focus的元素
注意:
如果这几个伪类同时作用于一个元素上,则有顺序上的约定,否则可能造成伪类不生效的问题。
:hover必须定义在:link和:visited之后
:active必须定义在:hover之后
理想的顺序: :link -> :visited -> :hover -> :active
- 结构型伪类 (css3新增)
常见的结构型伪类:
:first-child 选择某个元素的第一个子元素;
:last-child 选择某个元素的最后一个子元素;
:nth-child(n) 匹配属于其父元素的第 n个子元素,不论元素的类型;
:nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素,不论元素的类型;
:nth-of-type() 规定属于其父元素的第n个 指定 元素;
:nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定 元素;
:first-of-type 选择一个上级元素下的第一个同类子元素;
:last-of-type 选择一个上级元素的最后一个同类子元素;
:only-child 选择它的父元素的唯一一个子元素;
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:checked匹配被选中的input元素,这个input元素包括radio和checkbox。
:empty 选择的元素里面没有任何内容。
:disabled匹配禁用的表单元素。
:enabled匹配没有设置disabled属性的表单元素。
:valid匹配条件验证正确的表单元素。
:in-range选择具有指定范围内的值的 <input> 元素。
:optional选择不带 "required" 属性的 <input> 元素。
:focus选择获得焦点的 <input> 元素。
伪元素
全部的伪元素:
选择器 | 例子 | 例子描述 |
---|---|---|
::after | p::after | 在每个 元素之后插入内容 |
::before | p::before | 在每个 元素之前插入内容 |
::first-letter | p::first-letter | 选择每个 元素的首字母。 |
::first-line | p::first-line | 选择每个 元素的首行。 |
::selection | p::selection | 选择用户选择的元素部分。 |
规范要求
CSS3 规范中有一部分要求,为了区分伪类和伪元素,伪元素使用两个冒号 (:: ), 伪类使用一个冒号 (: )
注意:
在这里对于::first-line,我们需要注意,::first-line 伪元素只能应用于块级元素。
在这里对于::first-letter ,我们需要注意,::first-letter 伪元素只能应用于块级元素。
在元素的 ::before和 ::after中插入内容-content属性(如果没有写content样式,伪元素会失效)