伪类&伪元素

发表于 | 分类于 | | 阅读次数:
字数统计: 764 字 | 阅读时长 ≈ 2 分钟

伪类&伪元素

伪元素和元素的区别

伪元素在html文档渲染后，页面中有相应的内容显示，同时能够设置它的样式，而伪类只能设置样式

常用伪类和伪元素

after-before

即 *::after/*::before

描述：这一对伪元素，它们允许使用者通过css向html页面中添加内容。

用途：在清除浮动中，用作一个占位元素；字体图标（iconfont）

  • *:link(直接设置连接的样式),
  • *:visited（区别与其他未访问过的样式）,
  • *:hover（鼠标移动上去后的样式）,
  • *:active（鼠标单击触发时的样式）

描述：这是一组伪类，除了:link 只能作用于a[href]外，其它的适用于任何元素。

focus

即 *:focus

描述：当元素获得焦点时，该伪类样式起效果。

checked

即 *:checked

用途：当元素处于选中状态的时候这个伪类起作用。常见的元素是input(type为radio或checkbox)。这种可以表示开关的状态的伪类可以减少对js的使用。

enabled-disabled

即 *:enabled/*:disabled

描述：该对伪类给元素提供了一个条件，用来设置元素的样式。

用途：该伪类对应元素(input/ button/ textarea/ optgroup / option /fieldset /seelect)内的属性 disabled ，这些元素时html用于与用户进行交互的。

nth-child

即 *:nth-child(an+b)

描述：根据传入的一个运算公式，选择第几个元素，或者说每个几个元素选择一个。从第一个开始。

nth-last-child

即 *:nth-last-child(an+b)

描述：根据传入的一个运算公式，选择第几个元素，或者说每个几个元素选择一个。从最后一个开始。

first-child

即 *:first-child

描述：匹配该伪类所指代的元素的父元素下的第一个子元素

last-child

即 *:last-child

描述：匹配该伪类所指代的元素的父元素下的最后一个子元素

nth-only-child

即 *:nth-only-child

描述：匹配该伪类所指代元素的父元素下只有它这么一个元素，该伪类设置的样式起作用。

first-line

即 *::first-line

描述：该伪元素指代第一行文本。

用途：文章排版。

first-letter

即 *::first-letter

描述：该伪元素指代元素的第一个字符的样式。

用途：文章排版

root

即 :root

描述：该伪类就表示html文档中的根元素

注意：如果该伪类选择器和html元素选择器同时出现在页面中，伪类选择器的（权重大）优先级高。

required

即 *:required

描述：该伪类指代元素中含有required属性的元素，常见的就是form表单中的元素。

用途：表单验证

optional

即 *:optional

描述：该伪类针对form表单元素, 如：input或select，当它们未设置required属性，它们设置的样式起效果。

placeholder

即 *:placeholder

描述：改为元素设置显示的 placeholder 属性值的样式

selection

即 :selection

描述：匹配被用户选中的元素的样式。