css伪类兼容,css中的伪类-北京沣登科技发展公司

大家好，今天小编关注到一个比较有意思的话题，就是关于css伪类兼容的问题，于是小编就整理了3个相关介绍 CSS伪类兼容的解答，让我们一起看看吧。

CSS选择器first-child，当元素为第二个的时候，怎么处理？
伪类和伪元素的区别？
伪类选择器hover的使用？

CSS选择器first-child，当元素为第二个的时候，怎么 处理？

.content[data-role=page]:nth-child(2){} 使用:first-child伪类时一定要保证前面没有兄弟节点，你前面有个content所以会失效

div>

（图片来源网络，侵删）

你把这里的span 去掉和加上再看效果就明白了

伪类和伪元素的区别？

一是定义不同

（图片来源网络，侵删）

伪元素:用于创建一些不存在文档树的元素,并为其添加样式;比如我们可以通过:before在一个元素前增加一些文本并为其添加样式;用户可以看到这些样式,但其并不存在于文档树中

伪类:用于当某个元素处于某个状态时为其添加样式,这个状态是根据用户状态变化的;比如当鼠标悬停时我们通过:hover来描述这个元素的状态;它虽和css类似,但只有处于dom树无法描述的状态时才能为其添加样式

二是特点不同

（图片来源网络，侵删）

伪类是操作处于文档树中的元素

伪元素是创建一个文档树之外的元素

伪类选择器hover的使用？

定义和用法:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。代码效果测试：