美文网首页
CSS伪类,伪元素

CSS伪类,伪元素

作者: 萌萌肥可爱 | 来源:发表于2018-12-03 15:52 被阅读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前缀。该伪元素只支持双冒号的形式。 

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

相关文章

  • part2: CSS基础-练习

    CSS全称: cascading style sheets 谈谈css伪类与伪元素 这是我见过最全的伪类和伪元素总...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类: css引入伪类和伪元素概念是为了格式化文...

  • 伪元素&伪类

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。 伪元素&伪类:css引入伪类和伪元素概念是为了格式化文档...

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • CSS

    伪类的语法: CSS 类也可与伪类搭配使用。 伪元素

  • 伪元素和伪类

    伪元素和伪类 什么是伪元素? CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签...

  • 伪类和伪元素初探

    Css3为了区分伪类和伪元素,伪类使用单冒号:,伪元素使用双冒号:: 常见伪类有 :hover,:link,:ac...

  • ::before 和 :after中双冒号和单冒号 有什么区别?

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成);:before...

网友评论

      本文标题:CSS伪类,伪元素

      本文链接:https://www.haomeiwen.com/subject/gvkjcqtx.html