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

css伪类与伪元素

作者: 我性本傲 | 来源:发表于2019-03-06 16:11 被阅读0次


css装备部

CSS伪类:用于向某些选择器添加特殊的效果。

:hover            将样式添加到鼠标悬浮的元素

:active            将样式添加到被激活的元素

:link                将样式添加到未被访问过的链接

:visited           将样式添加到被访问过的链接

:focus            将样式添加到获得焦点的元素

:first-child      将样式添加到元素的第一个子元素

:lang              定义指定的元素中使用的语言

css3新增的伪类

p:first-of-type

选择属于其父元素的首个<p>元素的每个<p>元素。

p:last-of-type

选择属于其父元素的最后<p>元素的每个<p>元素。

p:only-of-type

选择属于其父元素唯一的<p>元素的每个<p>元素。

p:only-child

选择属于其父元素唯一的子元素的每个<p>元素。

p:nth-child(n)

选择属于其父元素的第n个子元素的每个<p>元素。

p:nth-last-child(n)

选择属于其父元素的倒数第n个子元素的每个<p>元素。

p:nth-of-type(n)

选择属于其父元素第n个<p>元素的每个<p>元素。

p:nth-last-of-type(n) 

选择属于其父元素倒数第n个<p>元素的每个<p>元素。

p:last-child

选择属于其父元素最后一个子元素的每个<p>元素。

p:empty

选择没有子元素的每个<p>元素(包括文本节点)。

p:target 

选择当前活动的<p>元素。

:not(p)

选择非<p>元素的每个元素。

:enabled

控制表单控件的可用状态。

:disabled 

控制表单控件的禁用状态。

:checked 

单选框或复选框被选中。

CSS伪元素:用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

::first-letter        将样式添加到文本的首字母

::first-line          将样式添加到文本的首行

::before            在某元素之前插入某些内容

::after               在某元素之后插入某些内容

伪类与伪元素的区别

单冒号(:)用于CSS3伪类

双冒号(::)用于CSS3伪元素

伪类与类优先级相同 

伪元素与标签优先级相同

伪类的效果可以通过添加实际的类来实现 

伪元素的效果可以通过添加实际的元素来实现 

伪元素在一个选择器中只能出现一次,并且只能出现在末尾 

相关文章

  • part2: CSS基础-练习

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

  • css伪元素

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

  • CSS

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

  • 伪元素与伪类的区别

    CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义w...

  • css伪类及伪元素

    CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义w...

  • 伪元素&伪类

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

  • 伪元素&伪类

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

  • css伪类和伪元素区别

    伪类与伪元素 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中...

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

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

  • 伪类和伪元素

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

网友评论

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

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