CSS3伪类和伪元素

mozillazg 发布于2019-04-23 13:35 / 694人阅读

作为一个CSS3初学不久者来说，很容易混淆单冒号（:）和双冒号（::）的用法，以为两者可以互换着来使用。我自己之前也混淆过他们，因为两者看起来太相像了，就像孪生兄弟。但实际上，他们的区别还是挺大的，最多算得上近房亲戚。下面我们来开始讲讲单冒号（:）伪类和双冒号（::）伪元素有什么相同和不同点（另外在CSS2中单冒号“:” 也叫做伪对象，具体可看看http://www.mb5u.com/tool/css2/）单冒号（:）早在CSS中已经存在了，相信用惯CSS的码农肯定对:hover伪类并不陌生。另外还有几个比较实用的伪类，例如：与链接访问有关的 :link(未被点击过的链接)，:visited（链接已被点击访问过）与键盘输入有关的 :focus(获得键盘输入焦点) 其他像 :lang伪类，:first-child伪类，大家可以自行到W3C官网看看具体用法，在这里我就不赘述了。特别说一下 :first-child伪类，这个伪类很有意思，不得不佩服制定规则的人的洞察力，CSS3出现了类似用法的伪类，为开发者提供了不少方便。其实，伪类和伪元素在CSS中已经存在，而CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。伪类和伪元素都对特定元素进行选择，前者重在对元素状态的描述，而后者更重在对元素本身的描述，这是伪类和伪元素内在的联系和区别。一、CSS3伪类 CSS3伪类又分为两类：状态伪类和结构性伪类。 CSS3状态伪类沿用了我们上面已经提及过的CSS中的:hover ，:link ，:visited 等伪类。另一方面CSS3中大幅增加状态伪类，例如： :first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child(index)根据数量选择某个元素的一个特定子元素，括号中填写索引值 :nth-of-type(index)根据类型选择某个元素的一个特定子元素，这个伪类与:nth-child()最大的不同点就在于是按类型来选择子元素的，而不是一股脑的什么子元素都算在内。给个例子吧： html:

这是数字1 这是数字2

这是数字3

这是数字4

css: div:nth-child（1）{color:blue;} 只会让第一个span元素的颜色变蓝 div:nth-of-type(2){color:red;} 则会使第二个span元素和第二个p元素的颜色都变红，原因是把div的子元素分成了两类，一类是span元素，另外一类是p元素。二、CSS3伪元素 CSS中已经有的伪元素 :first-letter ，:first-line ，CSS2中新增的伪元素 :after ，:before CSS3中将上面的4个伪元素的单冒号变成双冒号，另外还新增了::selection伪元素。下面来讲讲CSS3中这几个伪元素的一些常见功能 (1)::first-letter和::first-line :first-letter和:first-line分别对文字的第一个字母和第一行进行选择，这个从英文直接翻译过来是不难理解的，报刊上的第一个文字大写处理就可以用::first-letter。下面重点谈谈另外几个伪元素（2）::before和::after ::before和::after后面经常跟着content，用于在css渲染中向元素的头部或尾部添加内容。很关键的一点是添加的这些内容不会出现在DOM中，仅仅是作为css渲染层对元素进行修改。所以不要用::before或::after展示有实际意义的内容，而仅仅使用它们显示修饰性内容，例如在文字前面加上icon图标。至于怎么添加和添加有什么前提条件，又可以写一篇文章了。下次有空再来写写这个用法。关于兼容性问题：由于IE对CSS3的支持问题，所以在写代码时也要注意一些小问题。如果只需要兼容firefox、webkit、opera等浏览器，伪元素采用双冒号的写法是没多大问题的，但是如果需要兼容IE浏览器，那么还是用单冒号的写法比较稳妥。

GPU云服务器云服务器伪类 UI伪类伪类 html 类和对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2073.html

我终于理解了伪类和伪元素

摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...

张迁 2019-08-30 14:05 评论0 收藏0
css3伪类和伪元素你都懂了吗

摘要：什么是伪类伪类用于定义元素的特殊状态。例如，它可用于当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为指定元素后代的所有元素。什么是伪类？伪类用于定义元素的特殊状态。例如，它可用于：当用户将鼠标悬停在元素上时为其设置样式访问和未访问的链接不同样式在获得焦点时设置元素的样式伪类的语法后代选择器匹配作为...

LoftySoul 2019-08-30 15:44 评论0 收藏0
详解 CSS 属性 - 伪类和伪元素的区别

摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。之前写了一篇《详解 CSS 属性 - :before && :after》的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...

jiekechoo 2019-08-28 17:55 评论0 收藏0
详解 CSS 属性 - 伪类和伪元素的区别

摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。之前写了一篇《详解 CSS 属性 - :before && :after》的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...

AZmake 2019-08-01 14:39 评论0 收藏0