美文网首页
css伪类和伪元素

css伪类和伪元素

作者: 筱雪儿00 | 来源:发表于2016-07-24 01:47 被阅读0次

伪,假的意思。把伪字拿掉,可以看出它们的本质区别,一个是类(class),一个是元素(tag),本质区别是有没有创建新的元素,改变html结构(抽象层面上)。

常见的伪类有::link , :visited , :hover , :actived , :focus(向拥有键盘输入焦点的元素添加样式) :first-child(向元素的第一个子元素添加样式) , :lang(向带有lang属性特定值的元素添加样式)

常见的伪元素有:::before , ::after , ::first-letter(向文本的第一个字母添加样式) , ::first-line(向文本的首行添加样式)

注:::first-letter和::first-line只能作用于块级元素。

css3中伪类的定义: 

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。

任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。

伪元素定义:

伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码)。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)。

伪元素的由两个冒号::开头,然后是伪元素的名称。

使用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::。

一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。

(为保证兼容,伪元素在书写的时候还是采用一个冒号开头)

相关文章

  • 伪元素&伪类

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

  • 伪元素&伪类

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

  • part2: CSS基础-练习

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

  • 伪元素和伪类

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

  • 伪类和伪元素初探

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

  • css伪元素

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

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

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

  • Css3Two

    文本溢出样式设置 文本超出容器以后: 换行显示 超出容器部分也显示 伪类和伪元素 伪类和伪元素 都是css中的伪类...

  • ::before和::after伪元素的用法

    css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:tar...

  • 伪元素和伪类问题

    1.单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。2.css2伪类和伪元素都是用单引号,所有的浏...

网友评论

      本文标题:css伪类和伪元素

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