css伪类和伪元素

时间: 2019-10-23阅读: 357标签: 伪类

伪类和伪元素

伪类和伪元素,对于绝大多数同学来说,都是耳熟能详的名字,但确实又有很多人搞不清楚它们之间的区别,以致于混淆概念。而当概念都混淆的时候,也往往意味着你不会经常使用它,怕出错,怕用不好。而这也会大大影响你的效率,本来几行代码就可以完成的工作,却要写上一大堆......所以,花点时间理清楚每一个看似微小的概念,会让我们的编程更有效率。下面进入正题。

​ 伪类和伪元素的区别,其实很简单,从字面上就可以理解。它们有一个共同的修饰词“伪”,那么“伪”是什么意思呢?就是假的呗。所以,伪类就是假的类,伪元素就是假的元素,这就是在字面上它们之间的区别。下面我们再从定义上感受一下。


1.伪类

CSS3给出的定义是:The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

大致翻译过来的意思就是:伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息

通过上面的概念我们知道了伪类的功能有两种:

1.格式化DOM树以外的信息。比如: <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。


2.伪元素

CSS3给出的定义如下:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).  

​ 大致翻译过来的意思就是:伪元素可以创建一些文档语言无法创建的虚拟元素。比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter、::first-line)。同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after。


3.伪类和伪元素的区别(CSS3下的区别)

通过上面的概念,我们就可以知道伪类与伪元素最本质的一个区别:

伪类其实是弥补了CSS选择器的不足,用来更方便地获取信息。

HTML:

<ul>
    <li>11111</li>
    <li>22222</li>
</ul>   

CSS:

li:first-child {
    color: red;   
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足

而伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。

HTML:

<p>
    <span class="first-letter">H</span>ello, World
</p>

CSS:

.first-letter {
  color: red;
}

上面的代码其实就是:

p::first-letter {
  color: red;
}

所以,你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。除了上面这个本质区别以外,在CSS3中,伪类用单冒号:表示;而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。


4.主要用法

4.1伪类

1 :first-child

匹配第一个子元素。

HTML:

<ul>
    <li>111</li>
    <li>222</li>
</ul>   

CSS:

li:first-child {
  color: red; // 第一个 li 会变红
}

2 :last-child

匹配最后一个子元素。

HTML:

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

CSS:

li:last-child {
  color:red; // 最后一个 li 会变红
}

3 :first-of-type

匹配属于其父元素的第一个特定类型的子元素。

HTML:

<div>
    <h1>h1文本</h1>
    <p>p文本</p>
</div>

CSS:

p:first-of-type {
  color: red;  // <p>标签的内容变为红色
}

这里有必要强调一下 :first-child 与 :first-of-type 的区别。如果你的CSS写成:

p:first-child {
  color:red;
}

页面是不会有变化的,因为<p>元素并不是父元素<div>的第一个子元素。

4 :last-of-type

匹配属于其父元素的最后一个特定类型的子元素。

HTML:

<div>
    <h1>h1文本</h1>
    <h1>h1文本2</h1>
    <p>p文本</p>
</div>

CSS:

h1:last-of-type {
  color: red;  // 倒数第一个<h1>标签的内容变为红色(h1文本2)
}
4.2 伪元素

1 ::before

在被选元素之前插入内容。需要指定content属性来插入内容。

HTML:

<p>CSS</p>

CSS:

p::before {
  content: "Hi,";
}

2 ::after

在被选元素之后插入内容。需要指定content属性来插入内容。

HTML:

<p>Hi, </p>

CSS:

p::after {
  content: "CSS";
}

3 ::first-letter

匹配元素中文本的首字母。

HTML:

<p>我在学伪元素</p>

注意:试试把<p>标签改成<p>???我在学伪元素</p>,你会发现很有意思的现象。

CSS:

p::first-letter {
  font-size: 32px;
}

4 ::first-line

匹配元素中第一行的文本(只能在块元素中使用)。

HTML:

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

CSS:

p::first-line {
  color: red;
}

5 ::selection

匹配被用户选中的部分。

HTML:

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

CSS:

p::selection {
  color: red;
}


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6108

css的伪类有哪些?

同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。CSS 伪类用于向某些选择器添加特殊的效果。

css中:visited怎么不起作用?

css定义超链接四个状态也是有顺序的,对于这4个伪类的设置,有一点需要特别注意,那就是它们的先后顺序,要让它们遵守一个顺序原则,也就是link ~ visited ~ hover ~ active 。

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。

理解:before伪类搭配vertical-align:middle实现垂直居中的原理

总所周知,Css如何实现元素垂直居中?已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下:

css中:focus伪类的使用

当元素获取到焦点之后,若该元素是一个有效的链接,则通过“Enter”键即可进入该链接地址;在页面中也可以通过\\\"Tab\\\"键,遍历所有的可获得焦点的元素,使其获得焦点;

html中a标签的4个伪类样式

在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve,之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时候却发现并不起作用了

中间文字,两边横线的css3伪类的使用

CSS伪类是用来添加一些选择器的特殊效果。使用了css3的伪类,即相当于是在一个div中写入文字,然后在它前后各加了一个div,然后进行位置及宽高的调节。代码中只写一个div,然后在css样式中,对该div设置flex布局

善用CSS伪类,不用JS也能做出选项卡功能

本篇文章的技术给予选项卡UI另一种开发的选择,Radio button的特性还有很多应用可以做(如Switcher),只要善用HTML表单元素与CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

css否定伪类:not(s)

:not(X)是CSS中的一个否定伪类(选择器),并且接受一个简单的选择器作为参数。本质上,可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器。

深入理解CSS伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广