伪类和伪元素

ⅰ亾dé卋堺 提交于 2019-12-03 09:29:30
给链接定义样式
  • 有四个伪类可以让你根据访问者与该链接的交
     互方式,将链接设置成4种不同的状态。
  • 正常链接   – a:link
  • 访问过的链接– a:visited(只能定义字体颜色)
  • 鼠标滑过的链接– a:hover
  • 正在点击的链接– a:active
其他
  • 获取焦点– :focus
  • 指定元素前– :before
  • 指定元素后– :after
  • 选中的元素– ::selection
所有的伪类和伪元素
  1:checked   input:checked 选择所有选中的表单元素
  2:disabled   input:disabled 选择所有禁用的表单元素

  3:empty    p:empty 选择所有没有子元素的p元素

  4:enabled   input:enabled 选择所有启用的表单元素

  5:first-of-type   p:first-of-type 选择每个父元素是p元素的第一个p子元素

  6:in-range   input:in-range 选择元素指定范围内的值

  7:invalid   input:invalid 选择所有无效的元素

  8:last-child   p:last-child 选择所有p元素的最后一个子元素

  9:last-of-type   p:last-of-type 选择每个p元素是其母元素的最后一个p元素

  10:not(selector)   :not(p) 选择所有p以外的元素

  11:nth-child(n)   p:nth-child(2) 选择所有p元素的第二个子元素

  12:nth-last-child(n)   p:nth-last-child(2) 选择所有p元素倒数的第二个子元素

  13:nth-last-of-type(n)   p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素

  14:nth-of-type(n)   p:nth-of-type(2) 选择所有p元素第二个为p的子元素

  15:only-of-type   p:only-of-type 选择所有仅有一个子元素为p的元素

  16:only-child   p:only-child 选择所有仅有一个子元素的p元素

  17:optional   input:optional 选择没有"required"的元素属性

  18:out-of-range   input:out-of-range 选择指定范围以外的值的元素属性

  19:read-only   input:read-only 选择只读属性的元素属性

  20:read-write   input:read-write 选择没有只读属性的元素属性

  21:required   input:required 选择有"required"属性指定的元素属性

  22:root   root 选择文档的根元素

  23:target   #news:target 选择当前活动#news元素(点击URL包含锚的名字)

  24:valid   input:valid 选择所有有效值的属性

  25:link   a:link 选择所有未访问链接

  26:visited   a:visited 选择所有访问过的链接

  27:active   a:active 选择正在活动链接

  28:hover   a:hover 把鼠标放在链接上的状态

  29:focus   input:focus 选择元素输入后具有焦点

  30:first-letter   p:first-letter 选择每个<p> 元素的第一个字母

  31:first-line   p:first-line 选择每个<p> 元素的第一行

  32:first-child   p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素

  33:before   p:before 在每个<p>元素之前插入内容

  34:after   p:after 在每个<p>元素之后插入内容

  35:lang(language)   p:lang(it) <p>元素的lang属性选择一个开始值

:checked input:checked 选择所有选中的表单元素

:disabled input:disabled 选择所有禁用的表单元素

:empty p:empty 选择所有没有子元素的p元素

:enabled input:enabled 选择所有启用的表单元素

:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素

:in-range input:in-range 选择元素指定范围内的值

:invalid input:invalid 选择所有无效的元素

:last-child p:last-child 选择所有p元素的最后一个子元素

:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素

:not(selector) :not(p) 选择所有p以外的元素

:nth-child(n) p:nth-child(2) 选择所有p元素的第二个子元素

:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素

:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素

:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素

:only-child p:only-child 选择所有仅有一个子元素的p元素

:optional input:optional 选择没有"required"的元素属性

:out-of-range input:out-of-range 选择指定范围以外的值的元素属性

:read-only input:read-only 选择只读属性的元素属性

:read-write input:read-write 选择没有只读属性的元素属性

:required input:required 选择有"required"属性指定的元素属性

:root root 选择文档的根元素

:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)

:valid input:valid 选择所有有效值的属性

:link a:link 选择所有未访问链接

:visited a:visited 选择所有访问过的链接

:active a:active 选择正在活动链接

:hover a:hover 把鼠标放在链接上的状态

:focus input:focus 选择元素输入后具有焦点

:first-letter p:first-letter 选择每个<p> 元素的第一个字母

:first-line p:first-line 选择每个<p> 元素的第一行

:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素

:before p:before 在每个<p>元素之前插入内容

:after p:after 在每个<p>元素之后插入内容

:lang(language) p:lang(it) <p>元素的lang属性选择一个开始值

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!