CSS 系列之伪类与伪元素

zhouzhou

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

  • 锚伪类
  • 表单伪类
  • 结构化伪类

锚伪类

  • :link
  • :visited
  • :hover
  • :active
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

表单伪类

  • :checked
  • :disabled
  • :enabled
  • :focus
  • :required
  • :invalid
  • :valid
  • :in-range       ---选择元素指定范围内的值
  • :out-of-range       ---选择指定范围以外的值的元素属性
  • :optional       ---选择没有"required"的元素属性
  • :read-only
  • :read-write       ---选择没有只读属性的元素属性

结构化伪类

:first-child  
:last-child  
:nth-child(n)  
:nth-last-child(n)  
:only-child  

:first-of-type  ---匹配属于其父元素的首个特定类型的子元素的每个元素;
:last-of-type   ---匹配元素的最后一个子元素;
:nth-of-type(n)   ---:nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素;
:nth-last-type(n)  ---:nth-last-of-type与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的;
:only-of-type   ---当元素是其父元素中唯一一个特定类型的子元素时,:only-child匹配该元素;

:not        ---否定伪类,用于匹配不符合参数选择器的元素;
:target       ---当URL带有锚

关于child与:nth-of-type的区别,请参考CSS3选择器:nth-child和:nth-of-type之间的差异

其他

:root  ---匹配文档的根元素。一般的html文件的根元素是html元素,而SVG或XML文件的根元素则可能是其他元素
:lang  ---向带有指定 lang 属性的元素添加样式。

任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。

伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素内容

:first-letter
:first-line
:before
:after

一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。

使用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::。

伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的。

阅读 1.3k

web前端

1.5k 声望
73 粉丝
0 条评论
你知道吗?

web前端

1.5k 声望
73 粉丝
文章目录
宣传栏