CSS伪类,伪元素

2018-12-03  本文已影响0人  萌萌肥可爱

利用这些选择器可以为文档中不一定具体存在的结构指定样式,或者为某些元素啥的状态所指示的幻象类指定样式。


伪类选择器因为浏览器更好的支持所以相对应用更加广泛,当已有元素处于某个状态时,为其添加对应的样式,状态根据用户行为而动态变化。

a:link , a:visited

a:focus,a:hover,a:active //动态伪类

建议顺序

link-visited-focus-hover-active //IE6只支持伪类选择超链接,IE7不支持对表单使用focus

p:first-child,:target突出显示当前活动的HTML 锚,:empty匹配没有子元素的元素

:valid匹配条件验证正确的表单元素

伪元素:创造出不存在的新元素 css3规定伪元素用双冒号,伪类单冒号

::before

::after 对于这两个而言属性content是必须设置的

eg:content:url('')

::first-letter/:first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中

::first-line/:first-line 匹配元素中第一行的文本。这个伪元素只能用在块元素中,不能用在内联元素中。

::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。 

伪类的效果可以通过添加一个类的样式来实现,但是伪元素的效果必须通过添加一个实际的元素才能实现。大概区别就是这些,常用的就是上面这些了,但是伪类的顺序由于会受到权重的影响可能会出现覆盖现象,具体还是多加考虑吧。

上一篇 下一篇

猜你喜欢

热点阅读