您的位置:首页> 日志> 前端技术 正文

 

  刚开始接触伪类是使用A标签的四种伪类,分别是  :active :hover :link :visited,其中最为常用的就是a:hover,一开始以为只适用于A元素,偶然发现伪类是针对所有元素,不仅是A元素,到后面接触到CSS3的伪类 :nth-child(n)等,然后再发现伪元素,当时只知道如何使用,未搞懂这两者的区别,这次就来说说什么是伪类、伪元素、两者区别以及如何使用才更为合理。

      分别从定义、语法来区分伪类和伪元素,以及列出所有伪类与伪元素的属性

1.定义

· 伪类

根据W3C,CSS伪类用于向某些选择器添加特殊的效果。伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child:first-of-type:target

· 伪元素

伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before表示选择元素内容的之前内容,也就是""(默认空);::selection表示选择元素被选中的内容。

· 结论

伪类用于添加元素的特殊效果,而伪元素则是添加元素的内容,当然内容可以是空的,相当于空的div。

2.语法

· 伪类

伪类统一以:(单冒号)开头。

· 伪元素

伪元素标准写法以::(双冒号)开头。有时候发现单冒号写法也能正常显示,因为CSS2是使用单冒号的,CSS3出来了为了区分伪类和伪元素所以才用双冒号表示,所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

· 结论

大多数项目都需要兼容IE8以上浏览器,所以在项目需用到时用单冒号写法更为合适,如果是移动端网站,则使用双冒号。

 

3.伪类/伪元素一览表

· 伪类

属性 描述 CSS
:active 选择正在被激活的元素 1
:hover 选择被鼠标悬浮着元素 1
:link 选择未被访问的元素 1
:visited 选择已被访问的元素 1
:first-child 选择满足是其父元素的第一个子元素的元素 2
:lang 选择带有指定 lang 属性的元素 2
:focus 选择拥有键盘输入焦点的元素 2
:enable 选择每个已启动的元素 3
:disable 选择每个已禁止的元素 3
:checked 选择每个被选中的元素 3
:target 选择当前的锚点元素 3
:first-of-type 选择满足是其父元素的第一个某类型子元素的元素 3
:last-of-type 选择满足是其父元素的最后一个某类型子元素的元素 3
:only-of-type 选择满足是其父元素的唯一一个某类型子元素的元素 3
:nth-of-type(n) 选择满足是其父元素的第n个某类型子元素的元素 3
:nth-last-of-type(n) 选择满足是其父元素的倒数第n个某类型的元素 3
:only-child 选择满足是其父元素的唯一一个子元素的元素 3
:last-child 选择满足是其父元素的最后一个元素的元素 3
:nth-child(n) 选择满足是其父元素的第n个子元素的元素 3
:nth-last-child(n) 选择满足是其父元素的倒数第n个子元素的元素 3
:empty 选择满足没有子元素的元素 3
:in-range 选择满足值在指定范围内的元素 3
:out-of-range 选择值不在指定范围内的元素 3
:invalid 选择满足值为无效值的元素 3
:valid 选择满足值为有效值的元素 3
:not(selector) 选择不满足selector的元素 3
:optional 选择为可选项的表单元素,即没有“required”属性 3
:read-only 选择有"readonly"的表单元素 3
:read-write 选择没有"readonly"的表单元素 3
:root 选择根元素 3

 

· 伪元素

属性 描述 CSS
::first-letter 选择指定元素的第一个单词 1
::first-line 选择指定元素的第一行 1
::after 在指定元素的内容前面插入内容 2
::before 在指定元素的内容后面插入内容 2
::selection 选择指定元素中被用户选中的内容 3

 

 在实际应用时,伪类使用的会更多,其中:hover 用于做特殊效果,如A元素鼠标滑过状态、CSS3过渡动画等,:nth-child(n) 则很灵活,用于选择奇数偶数的元素时、指定第几个元素时,适用于表格、列表等。

比如实现表格隔行浅灰色背景

 

虽然伪元素使用场景不多,但是我觉得很实用,更多时候是用于字体图标、图片图标、清除浮动等,比如有时候无法改变HTML结构、不能添加新的元素以实现效果,亦或者减少代码量,这时候伪元素很有用了,项目输出时有的标签列表不带i元素,修改标签又会影响维护,这时候就可以用伪元素来替代i元素了,即实现了效果,也不影响其他地方。

比如在li的内容前插入伪元素替代i元素,注意:需要给伪元素定义 content 值为空和定义伪元素为block才会正常显示伪元素,模拟为div元素。

主要总结了常用的使用方法,更多的使用场景方法需要小伙伴们去发掘了!