伪类(:)和伪元素(::)

时间：2022-09-26 08:27:56

  • 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
    简而言之：伪类总是以一个冒号开头。伪元素通常以两个冒号开头。
    在 CSS2 时代，伪元素和伪类均是以一个冒号开头的；在 CSS2.1 之后，为了对伪元素和伪类加以区分，规定伪类继续以一个冒号开头，而伪元素改为以两个冒号开头。
    但是为了向前兼容，浏览器同样接受 CSS2 时代已经存在的伪元素（它们包括:before, :after, :first-line, :first-letter）的单冒号写法。但是对于 CSS2 之后所有新增的伪元素（例如::selection），必须采用双冒号写法。
    一些老旧的浏览器不支持双冒号的写法，因此如果必须兼容旧浏览器，则应该使用单冒号写法。IE 从 9 开始支持双冒号写法。

  • 伪类：

属性 描述 在哪个 CSS 版本中定义
:link css1
:visited css1
:hover css1
:active css1
:focus css2
:first-child css2
:lang css2
:enabled UI元素状态伪类 开始===
":enabled",":disabled",":checked"等伪类称为UI元素状态伪类		 css3
:disabled "type="text"有enable和disabled两种状态，前者为可写状态后者为不可写状态 css3
:checked "type="radio"和"type="checkbox""有"checked"状态(不加:checked时，是没有选中时的样式)，没有:unchecked这个伪类 css3
:read-write css3
:read-only css3
:optional css3
:required css3
:in-range css3
:out-of-range css3
:valid css3
:invalid UI元素状态伪类 结束=== css
:root 结构性伪类选择器 开始===
四个基本的结构性伪类选择器 :root,:target,:empty,:not
其他的结构性伪类选择器 :first-of-type，:first-child等，如下		 css3
:target css3
:empty 举例：p:empty {} css3
:not 举例：:not(p) {} css3
:first-of-type 父级的第一个此种元素类型，等同于 :nth-of-type(1) css3
:nth-of-type(n) 父级的第n个此种元素类型。举例：p:nth-of-type(2) 父级的类型为p的子元素，且是第2个；
先确定了元素类型，再找第几个		 css3
:last-of-type 父级的最后一个此种元素类型 css3
:nth-last-of-type(n) 父级的倒数第n个此种元素类型 css3
:only-of-type 父级的唯一此种类型元素 css3
:first-child 元素是父级的第一个元素时 css3
:nth-child(n) 元素是父级的第n个元素时。举例：p:nth-child(2) 父级的第2个元素，且是p类型；
先确定了第几个子元素，再匹配类型		 css3
:last-child 元素是父级的最后一个元素时 css3
:nth-last-child(n) 元素是父级的倒数第n个元素时 css3
:only-child 元素是父级的唯一一个元素时
结构性伪类选择器 结束===		 css3
  • 伪元素：
属性 描述 在哪个 CSS 版本中定义
::first-letter css1
::first-line css1
::before css2
::after css2
::selection css3
标签：

相关文章