文档章节

伪类和伪元素

不负好时光
 不负好时光
发布于 10/24 10:21
字数 1561
阅读 16
收藏 0

伪类和伪元素

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

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

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;
}

本文转载自:https://www.jianshu.com/p/996d021bced3

不负好时光
粉丝 22
博文 202
码字总数 99210
作品 0
徐汇
程序员
私信 提问
css中的伪类和伪元素

伪类 伪类与类相似,但又没有类附加标签上。伪类分为UI伪类和结构化伪类。 UI伪类 :link(将样式添加到未被访问的链接上) :visted(将样式已添加到访问的链接上) :hover(将样式添加到鼠标悬浮的...

sunshinewyf
2015/10/13
72
0
css伪类选择器

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。 在大多情况下,伪类选择器是非...

省委书记沙瑞金
2016/11/08
118
0
如何给input、textarea的placeholder属性设置字体颜色?

代码如下: input::-webkit-input-placeholder { color: #D6D0CA !important; / WebKit browsers / } input:-moz-placeholder { color: #D6D0CA !important; / Mozilla Firefox 4 to 18 / } ......

chic
09/29
0
0
即学即用,轻松搞定这些选择器!(下)

在上一篇文章中,我们讲到基础选择器中的元素选择器、ID选择器、类选择器。本期我们继续看一下伪类选择器、伪元素选择器、通用选择器的使用方法。 伪类选择器 伪类是指逻辑上存在、但文档树中...

我的卡
2018/12/18
18
0
css样式-选择符-伪类-伪元素

添加css三种方式 1、行内样式 2、嵌入样式<style> 3、链接样式<link> 4、import 指令:@import url(css/style.css) 选择符整体上分为三类: 上下文选择符 基于祖先或同胞元素选择一个元素 1、...

风云海滩
2015/08/27
54
0

没有更多内容

加载失败,请刷新页面

加载更多

Java自学指南五、编码工具

工欲善其事,必先利其器... 想要高效率编码输出和快速处理文本,需要 熟悉编程语言的语法 盲打 至少需要熟练使用一种文本编辑器 至少熟练熟练使用一种 IDE (集成开发环境) 现实中,看到过二指...

ConstXiong
28分钟前
4
0
Java 集合框架

早在 Java 2 中之前,Java 就提供了特设类。比如:Dictionary, Vector, Stack, 和 Properties 这些类用来存储和操作对象组。 虽然这些类都非常有用,但是它们缺少一个核心的,统一的主题。由...

天子剑毅
44分钟前
6
0
Oracle 回滚段

--查询数据文件 select t.TABLESPACE_NAME, --表空间名 t.FILE_NAME, --文件名 t.AUTOEXTENSIBLE, --是否自动扩展 t.BYTES / 1024 / 1024 as tsize, --表空间初始大小 t.MAXBYTE...

max佩恩
52分钟前
6
0
在Serverless Kubernetes(ASK)集群中使用Nginx Ingress

ASK: Alibaba Cloud Serverless Kubernetes 导读 不同于阿里云ACK集群默认通过nginx-ingress-controller提供ingress能力,在ASK(Serverless Kubernetes)集群中默认基于SLB七层转发提供ingre...

阿里云官方博客
今天
5
0
Android换肤原理和Android-Skin-Loader框架解析

https://blog.csdn.net/stven_king/article/details/78648095 https://www.jianshu.com/p/b0253de8ac04 https://blog.csdn.net/weixin_38261570/article/details/82079540......

shzwork
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部