理解css伪类和伪元素

伪类就是可以通过直接添加一个类样式达到同等效果，而伪元素，则需要先添加一个元素，然后在元素上添加样式才能达到同等效果
伪类
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

伪元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
:Pseudo-classes
::Pseudo-elements
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

一些常用的css伪元素和伪类的用法

通过css3伪类选择器： :nth-child() 可以选择表格或li等有规律元素的偶数行。
odd表示奇数行，even表示偶数行;
tr:nth-child(odd) {background-color: #333;}
tr:nth-child(even) {background-color: #f9f9f9;}

使用first-child和last-child伪类设置最后和第一个元素：
table tr:first-child {background: #eee}
table tr: last-child{background: #eee}

伪元素:before和:after用法
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

//html
<p>ello Worl</p>
//cssp:before{content: "H"  /*:before和:after必带技能，重要性为满5颗星*/}p:after{content: "d"  /*:before和:after必带技能，重要性为满5颗星*/}

结果输出“Hello World”

参考
https://segmentfault.com/a/1190000000484493

理解css伪类和伪元素相关推荐

详解CSS伪类与伪元素
伪类/伪元素定义做前端那必须的要接触到 CSS 的伪类和伪元素.常见的又:focus,:hover,:link,:visited 等等.在 CSS1 和 CSS2 中对伪类和伪选择器没有做出很明显的 ...
css伪类和伪元素的特性和区别
伪元素是真的有元素前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息: 伪元素本质上是创建了一个有内容的虚拟容器: CS ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
【重识 HTML + CSS】CSS 伪类、伪元素
CSS 伪类.伪元素伪类 (pseudo-classes) 动态伪类 (dynamic pseudo-classes) :link.:visited.:hover.:active :focus 目标 ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...

理解css伪类和伪元素

一些常用的css伪元素和伪类的用法

理解css伪类和伪元素相关推荐

最新文章

热门文章