css伪类和伪元素

CSS中的伪类和伪元素（详细）

2022-01-21 20:24:46

这篇想要跟大家分享的是css中的伪类和伪元素，有任何问题可以私聊我或者评论哦！

首先，我们先来想一下

一、引入伪类跟伪元素的原因？

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述

比如CSS没有“段落的第一行”、“文章首字母”之类的选择器，而这在一些出版场景里又是必须的，因此引入。

引用标准中的话：

(CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。)
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on
information that lies outside the document tree.

二、什么是伪类，伪元素？

1、伪类

概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

2、伪元素

概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

三、伪类

分类

状态伪类
结构性伪类

1、状态伪类：基于元素当前状态进行选择的

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

实例

<!DOCTYPE html>
<html>
<head>
<style>
/* 未访问的链接 */
a:link {
  color: red;
}

/* 已访问的链接  */
a:visited {
  color: green;
}

/* 鼠标悬停链接  */
a:hover {
  color: hotpink;
}

/* 已选择的链接*/
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><a href="">这是一个链接</a></p>

</body>
</html>

注意：

这几个伪类同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，造成效果失效！

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。(意思是必须先写a:link 和 a:visited再写 :hover）

a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active）

另外伪类名称对大小写并不敏感

伪类和 CSS 类

当您将鼠标悬停在类highlight上时，会改变颜色：

a.highlight:hover {
  color: red;
}

悬停在 <div> 上

div:hover {
  background-color: blue;
}

把鼠标悬停到 <div> 元素以显示 <h1>元素（类似工具提示的效果）

h1 {
  display: none;
  background-color: green;
  padding: 25px;
}

div:hover h1 {
  display: block;
}

2、结构性伪类：css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的结构性伪类

:first-child 选择某个元素的第一个子元素；
  :last-child 选择某个元素的最后一个子元素；
  :nth-child(n) 匹配属于其父元素的第 n个子元素，不论元素的类型；
  :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n个子元素，不论元素的类型；
  :nth-of-type() 规定属于其父元素的第n个指定元素；
  :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定元素；
  :first-of-type 选择一个上级元素下的第一个同类子元素；
  :last-of-type 选择一个上级元素的最后一个同类子元素；
  :only-child 选择它的父元素的唯一一个子元素；
  :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
:empty 选择的元素里面没有任何内容。
  :disabled匹配禁用的表单元素。
  :enabled匹配没有设置disabled属性的表单元素。
  :valid匹配条件验证正确的表单元素。
:in-range选择具有指定范围内的值的 <input> 元素。
  :optional选择不带 "required" 属性的 <input> 元素。
:focus选择获得焦点的 <input> 元素。

实例

选择器匹配p元素的第一个子元素：

p:first-child {
  color: red;
}
<p>你好</p>
<p>好啊</p>

匹配所有 <p> 元素中的首个 <i> 元素:

p i:first-child {
  color: blue;
}

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

段落2变成蓝色

语法解释：p:nth-child(3),P标签的父元素是body，body的第3个子元素是“段落2。”所以段落2”，颜色变成了蓝色

p:nth-child(3)
{
background:blue;
}
 
<body>
 
<h1>今天学习伪类和伪元素</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

 
</body>

在上一个代码中，如果p:nth-child(3)改为属p:nth-of-type(3) ，则意思为规定其父元素的第3个 p 元素，那么变蓝色的是段落3

lang="en" 的 q 元素定义~：

q:lang(en) {
  quotes: "~" "~";
}

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

选择获得焦点的 <input> 元素(点击输入框，背景颜色变为黄色）:

input:focus {
  background-color: yellow;
}
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>

四、伪元素

所有的伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

注意：

CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)，伪类使用一个冒号 (:)

对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。

实例

为所有 <p> 元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-size:16px;
}

在这里对于::first-line,我们需要注意，::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

设置所有 <p> 元素中文本的首字母格式：

p::first-letter {
  color: red;
  font-size: 16px;
}

在这里对于::first-letter ,我们需要注意，::first-letter 伪元素只能应用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

在这里要对::before和::after,做个讲解

在元素的 ::before和 ::after中插入内容-content属性（如果没有写content样式，伪元素会失效）

默认值：	normal
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.content="url(beep.wav)"

contnt属性的类别：

none	设置 content 为空值。
normal	在 :before 和 :after 伪类元素中会被视为 none，即也是空值。
counter	设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）
attr(attribute)	将元素的 attribute 属性以字符串形式返回。。
string	设置文本内容
open-quote	设置前引号
close-quote	设置后引号
no-open-quote	移除内容的开始引号
no-close-quote	移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）的链接地址
inherit	指定的 content 属性的值，应该从父元素继承

在每个 <h1> 元素的内容之前插入一幅图：

h1::before {
  content: url();
}

在每个 <h1> 元素的内容之后插入一幅图像：

h1::after {
  content: url();
}

使所选文本在蓝色背景上显示为红色：

::selection {
  color: red; 
  background:blue;
}

可以应用于 ::selection：的属性

color
background
cursor
outline

伪元素与 CSS 类结合使用：(将以粉色和较大的字体显示 class="name" 的段落的首字母。)

p.name::first-letter {
  color: hotpink;
  font-size: 200%;
}  

<p class="name">你好漂亮！</p>

五、伪类和伪元素的应用

1、画分割线

效果如图

<style>
/*content没有内容也一定要记得写*/
    .line::before, .line::after {
      content: '';
      display: inline-block;
      width: 300px;
      border-top: 1px solid black;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="line">此处为分割线</p>
</body>

2、清除浮动

这里将会在下一次分享“浮动”时去分享

其他应用也会在后续的使用中，不断发现，不断补充

最后！

关于代码只粘贴了主要代码，其他的内容，需要读者自己进行补充

下次见！

html 前端

更多相关内容

CSS伪类和伪元素的区别详解
2020-09-25 01:08:36

伪类和伪元素不是真正意义上的html存在的类和元素,他们的存在是为了方便对状态和位置进行样式定义。具体他们之间有什么区别呢，这就是今天我们需要讨论的问题了

收起
CSS 伪类和伪元素的用法和区别
2019-09-18 16:39:36
伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单说就是弥补常规CSS选择器的不足，具体都有哪些伪类对于大部分人来说，用到最多的就是状态和结构化的，...
伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。简单说就是弥补常规CSS选择器的不足，具体都有哪些伪类

对于大部分人来说，用到最多的就是状态和结构化的，简单使用就不多做介绍了，下面看一个比较有意思的栗子
```
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
  color: red
}

  <ul class="list">
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
    <li>列表1</li>
  </ul>
  <ul class="list">
    <li>列表2</li>
    <li>列表2</li>
    <li>列表2</li>
  </ul>
```
看一下是什么效果

可以看到这是完全通过css来感知子元素的个数

:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。

如果元素总数不足4，则不会存在符合:nth-last-child(n+4)的元素（一共没有四个，也就不存在倒数第四个），那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。

但是如果只用~li，是不会匹配到第一个li的，所以又加上了li:nth-last-child(n+4):first-child

伪元素

伪元素本质上是创建了一个有内容的虚拟容器

说几种常用的伪元素

::before（在被选元素之前插入内容） ::after（在被选元素之后插入内容）都需要指定content属性来插入内容

::first-line（匹配元素中第一行的文本，只能在块元素中使用）

::selection（匹配被用户选中的部分,只可以应用于少数的CSS属性：color, background, cursor,和outline。）
```
    .aa::before {content: '123'}
    .aa::after {content: '678'}
    .aa::first-line {color: red}
    .aa::selection {background: blue}

<div class="aa" style="width: 100px">内容内容内容内容内容内容内容内容内容内容内容内容</div>
```
区别

1.伪类的操作对象是文档树中已有的元素。伪元素则创建了一个文档树外的元素，用户可以看到这些文本，但是这些文本实际上不在文档树中。根本区别在于：有没有创建一个文档树之外的元素。

2.语法不同。CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。

3.伪元素只能出现在末尾 div:hover::before 不能写div::before span
收起
展开全文
css3 伪元素和伪类选择器详解
2020-09-25 02:23:47

无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。

收起
浅谈CSS伪类与伪元素
2021-01-19 20:56:09

伪类伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态...

收起
CSS伪类与伪元素
万次阅读 多人点赞 2019-03-11 16:47:00
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的...
为什么要引入伪类与伪元素？

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。

什么是伪类，伪元素？
- 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
- 伪元素：用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。
伪类的分类：状态伪类和结构性伪类
- 状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
常见的状态伪类主要包括：
1. :link 应用于未被访问过的链接；
2. :hover 应用于鼠标悬停到的元素；
3. :active 应用于被激活的元素；
4. :visited 应用于被访问过的链接，与:link互斥。
5. :focus 应用于拥有键盘输入焦点的元素。
- 结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
常见的结构性伪类包括：
1. :first-child 选择某个元素的第一个子元素；
2. :last-child 选择某个元素的最后一个子元素；
3. :nth-child() 选择某个元素的一个或多个特定的子元素；
4. :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
5. :nth-of-type() 选择指定的元素；
6. :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
7. :first-of-type 选择一个上级元素下的第一个同类子元素；
8. :last-of-type 选择一个上级元素的最后一个同类子元素；
9. :only-child 选择的元素是它的父元素的唯一一个子元素；
10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11. :empty 选择的元素里面没有任何内容。
12. :checked匹配被选中的input元素，这个input元素包括radio和checkbox。
13. :default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
14. :disabled匹配禁用的表单元素。
15. :enabled匹配没有设置disabled属性的表单元素。
16. :valid匹配条件验证正确的表单元素。
常见的伪元素选择器：
1. ::first-letter 选择元素文本的第一个字（母）。
2. ::first-line 选择元素文本的第一行。
3. ::before 在元素内容的最前面添加新内容。
4. ::after 在元素内容的最后面添加新内容。
5. ::selection匹配用户被用户选中或者处于高亮状态的部分
6. ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
注意：你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。

伪元素的应用：
- 清除浮动：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。
代码如下：
```
.clear::after {
    content: '';
    display: block;
    clear: both;
}
```
- 画分割线：画一条如下的分割线
代码如下：
```
<style>
    * {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="spliter">分割线</p>
</body>
```
- 计数器：使用CSS实现计数器，用到的属性有
1. counter-reset: 属性设置某个选择器出现次数的计数器的值。默认为 0。
2. counter-increment: 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
3. content: 插入生成内容。
代码如下：
```
<style>
    .chooses {
      counter-reset: letters;
    }
    .chooses input:checked {
      counter-increment: letters;
    }

    .choose span::after {
      content: counter(letters);
    }
  </style>
</head>
<body>
  <div class="chooses">
    <input type="checkbox">a
    <input type="checkbox">b
    <input type="checkbox">c
    <input type="checkbox">d
    <input type="checkbox">e
    <input type="checkbox">f
    <input type="checkbox">g
    <input type="checkbox">h
    <input type="checkbox">i
    <input type="checkbox">j
  </div>
  <p class="choose">我选择了<span></span>个字母</p>
</body>
```
效果如下：
收起
展开全文
CSS 伪类和伪元素以及权重比较
千次阅读 2019-03-24 15:54:26

伪元素：注意伪元素是代表一类元素权重比较共分为4个等级：第一等：代表内联样式，如: style="xxx"，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，...

伪类：注意伪类是类

伪元素：注意伪元素是代表一类元素

权重比较

共分为4个等级：

第一等：代表内联样式，如: style="xxx"，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10。

第四等：代表元素选择器和伪元素选择器，如div，p，权值为1。

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）相邻后代选择器（~）并不在等级中，所以他们的权值都为0。

比较案例

补充知识点：

收起

展开全文
CSS伪类和伪元素的区别
2020-10-18 22:55:42

CSS伪类和伪元素的区别 1.简介 css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪...

收起

html
CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before
2020-12-13 15:02:24

CSS伪元素(Pseudo Element):after与:before 估计大家很少用到这些，但是在技术飞速发展的现在，我觉得我们不能整天把时间浪费在兼容IE6上！先看一下:after与:before甚模样： HTML中只有一个P标签,P里面有一行文字...

收起
CSS 伪类和伪元素的区别以及详解o((＞ω))o
2022-03-02 15:38:28

一、伪类 **关于伪类的定义，先来看看在 CSS3 建议文档是...- 伪类由一个冒号 `:` 开头，冒号后面是伪类的名称和包含在圆括号的可选参数。 - 任何常规选择器都可以在任何位置使用伪类。 - 一些伪类的作用会互斥，另外一

收起

html
CSS伪类和伪元素以及选择器的权重
2021-06-30 21:48:26

伪类选择器的权重和class,属性选择器相同，伪元素选择器的权重和标签选择器的属性相同。在这里附加一个css选择器的权重知识当权重一样时，后面的会覆盖前面的。显示后面的结果。 1000和100不是10进制的100和10 是...

收起
css伪类与伪元素的区别
2021-03-29 13:55:36

css伪类与伪元素的区别1、伪类(pseudo-classes)2、伪元素(Pseudo-elements)3、伪类与伪元素的区别 1、伪类(pseudo-classes) 其核心就是用来选择DOM树之外的信息不能够被普通选择器选择的文档之外的元素，用来添加...

收起
CSS的伪类和伪元素
千次阅读 2021-01-17 13:44:05

伪元素和伪类虽然不是特别常用，但是，很好用，可以帮你省掉很多无用功，效果还好。下面直接进入正题，尽量用最小的篇幅让人明白如何使用它们。...1.伪元素和伪类的区别伪元素和伪类都是为了给一些特殊需求加样式，...

收起
jQuery修改CSS伪元素属性的方法
2021-01-19 19:11:22

CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。假设有如下HTML代码： <div class=techbrood id=td_pseudo>techbrood introduction 和CSS代码： .techbrood:before { width: 0; } 现在你想...

收起
css 伪类和伪元素的用法和区别
千次阅读 2019-09-18 22:10:38

以此来区分伪元素和伪类。为了兼容老的浏览器，用单冒号类表达伪元素也是能够被识别的，比如写:after :before :first-line :fist-letter 2.概念的区别伪类侧重丰富选择器的选择语法范围内元素的选择能力，伪元素...

收起
利用CSS伪元素创建带三角形的提示框的实现方法
2020-09-24 20:58:27

下面小编就为大家带来一篇利用CSS伪元素创建带三角形的提示框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起
详解CSS 伪元素及Content 属性
2020-12-11 06:42:20

说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.after不是一样...

收起
CSS的伪元素和伪类的区别
千次阅读 多人点赞 2019-03-02 11:49:03

其实明白过来以后，再回头去想为什么自己会混淆伪元素（pseudo-elements）和伪类（pseudo-classes）的概念，反而会觉得难以理解。毕竟，单从名字就能拿一眼看出它们的区别，一个是假的元素，另一个是假的类。 1. ...

收起
CSS伪类和 伪元素
2017-05-27 11:27:04

前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及标签的:link、visited等，伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和...

收起

前端 class
浅谈CSS伪类和伪元素及CSS3新增伪类
千次阅读 2017-02-28 17:09:04

选择属于其父元素的首个元素的每个元素。 p:last-of-type 选择属于其父元素的最后元素的每个元素。 p:only-of-type 选择属于其父元素唯一的元素的每个元素。 p:only-child 选择属于其父元素唯一的子元素的每个...

收起
CSS伪类与CSS伪元素的区别及由来具体说明
2020-09-22 12:37:46

关于两者的区别，其实是很古老的问题.这里着重写的是为什么这两者不同，以及一些平时容易错过的细节,需要的朋友可以参考下

收起
CSS伪类和伪元素及CSS3新增伪类
2018-08-17 23:32:07

1、伪类与伪元素 CSS伪类：用于向某些选择器添加特殊的效果。伪类作用 :hover 将样式添加到鼠标悬浮的元素 :active 将样式添加到被激活的元素 :focus 将样式添加到获得焦点的元素 :link 将样式添加到未被访问...

收起
css中的伪类和伪元素
2020-02-06 14:56:06

:before，::before这俩写法，估计有些...双冒号(::)这是CSS3 规范中的要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已...

收起
CSS伪类/伪元素选择器整理
2020-09-25 05:38:34

CSS伪类及伪元素选择器，如超链接的a：link、a：visited、a：hover等等，本文整理了一些，喜欢的朋友可以收藏下

收起
使用CSS伪元素实现文字部分变色的方法
2020-12-13 11:29:15

这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。CSS Code ...

收起