作者:f永远喜爱捉迷藏 | 来源:互联网 | 2020-07-27 08:38
在我们学习前端开发的时候,有时总会把css中的伪类和伪元素混淆在一起。那么,在css中什么是伪类?什么又是伪元素?它们有什么区别,又是怎么使用的?本章我们就给大家好好聊聊css中的伪类和伪元素,介绍css中的伪类和伪元素的区别和基本用法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在我们学习前端开发的时候,有时总会把css中的伪类和伪元素混淆在一起。那么,在css中什么是伪类?什么又是伪元素?它们有什么区别,又是怎么使用的?本章我们就给大家好好聊聊css中的伪类和伪元素,介绍css中的伪类和伪元素的区别和基本用法。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一.伪类(用于向某些选择器添加特殊的效果)
伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。
伪类包含两种:状态伪类和结构性伪类。
状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式也会失去。常见的状态伪类主要包括:
:link 应用于未被访问过的链接;
:hover 应用于鼠标悬停到的元素;
:active 应用于被激活的元素;
:visited 应用于被访问过的链接,与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
结构性伪类是css3新增选择器,利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少class和id属性的定义,使文档结构更简洁。常见的包括:
:first-child 选择某个元素的第一个子元素;
:last-child 选择某个元素的最后一个子元素;
:nth-child() 选择某个元素的一个或多个特定的子元素;
:nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type() 选择指定的元素;
:nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
:first-of-type 选择一个上级元素下的第一个同类子元素;
:last-of-type 选择一个上级元素的最后一个同类子元素;
:only-child 选择的元素是它的父元素的唯一一个子元素;
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty 选择的元素里面没有任何内容。
例:
效果图1:
:first-letter 选择元素文本的第一个字(母)。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。
效果图:
以上就是css如何分辨伪类和伪元素?伪类和伪元素的各自的区别与用法(代码实例)的详细内容,更多请关注 第一PHP社区 其它相关文章!