CSS3的4大伪元素选择器详解

小鱼儿 2022-07-12 21:14 308阅读 0赞

在CSS3开发中，常见的伪元素选择器主要有4种，下面就和大家一起来扒一扒。

**first-line伪元素选择器**

我们在这个后面接着来写，我们写一个段落

<p>

在CSS中，主要有四个伪元素选择器<br/>

first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

</p>

我们所说的这个first-line，这个选择器是需要向某个元素中的第一行文字使用样式。因为这个br它是换行，也就是说我们使用first-line的话它会，对我们第一行文字进行一个样式，我们来看一下对不对

p:first-line\{

color: \#f60;

\}

第一行我们给它一个橙色

![Center][]

第一行元素p的第一行文字，给它一个橙色，这就是我first-line的使用方法。

**first-letter伪元素选择器**

就拿我们这里的来测试，我们这样来

p:first-letter\{

color: green;

font-size: 24px;

\}

第一个文字我们给它一个绿色，然后呢给它加一个字体，我们看一下。

![Center 1][]

每一个元素中的第一个字我们都设为了绿色，这个字呢还很大很大。

**after伪元素选择器**

我们在这里新建一个ul在这个ul里面呢有这个很多的链接。

<li><a href="index1.html">伪类选择器</a></li>

<li><a href="index1.html">伪类选择器</a></li>

<li><a href="index1.html">伪类选择器</a></li>

<li><a href="index1.html">伪类选择器</a></li>

<li><a href="index1.html">伪类选择器</a></li>

<li><a href="index1.html">伪类选择器</a></li>

<li><a href="index1.html">伪类选择器</a></li>

我们在这个链接之前给它加入一个符号，我们看一下怎样来实现。那么在加入之前我们先来看一下是什么样的一个样式。

![Center 2][]

设这样的一个样式，那么我们来给它这样来，它默认的这个例的话是有有一个前面有这个圆点。那么我们把它给去掉。那么怎样去掉，在这里。

li\{

list-style: none;

\}

这个方法来将它去掉。

![Center 3][]

这样就将默认的圆点给去掉了，然后我们在这个例之前呢给它加一个圆点，通过这个元素之前的方法给它一个追加，追加之前呢它一个小圆点。

li:before\{

content:"...";

color: red;

\}

我们来测试一下。在前面就有这个小点点了，那么我们加一个小圆点？

![Center 4][]

它就有很多个小圆点，这就是在前面追加的方式。我们来看在后面追加的方式。

li:after\{

content: "\_\_after追加";

color: \#ff6600;

\}

![Center 5][]

**before伪元素选择器**

在每个 <p>  元素的内容之前插入新内容：

p:before

\{

content:"内容：";

\}

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

原文链接：[http://www.maiziedu.com/wiki/css3/css/][http_www.maiziedu.com_wiki_css3_css]

[Center]: /images/20220713/eaf04355149e4f5399fd735d172c04b3.png
[Center 1]: /images/20220713/e87f587db2cd47dbb5e7e5ba1d562e41.png
[Center 2]: /images/20220713/8086543074c74738bdbd8007a13c4d1b.png
[Center 3]: /images/20220713/d8332a18858f4bd68875974284285c13.png
[Center 4]: /images/20220713/faf4316bb0104dfeb02ed39d65ab02c6.png
[Center 5]: /images/20220713/1153a6ad7b0a454db02f31d01fa2a708.png
[http_www.maiziedu.com_wiki_css3_css]: http://www.maiziedu.com/wiki/css3/css/

发表评论取消回复

表情：

评论列表（有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS-常见的伪元素选择器的用法详解

`:before` 与 `:after` 分别在被选择元素的内容之前和内容之后插入元素，所以必须在双标签中使用伪元素选择器，在单标签中无效；使用伪元素选择器时必须要设置 con

本是古典何须时尚/ 2023年08月17日 17:03/ 0 赞/ 75 阅读

相关 CSS 选择器 and 伪类/伪元素

CSS 选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性伪类选择器，分为：链接伪类选择器，

谁践踏了优雅/ 2022年12月21日 04:56/ 0 赞/ 221 阅读

相关 css3伪元素选择什么,css3巧用选择器配合伪元素

一 . 前言有时我们在写底部导航栏时，会有很多超链接，每个链接间用“|”分割，如下图： ![bb6df385d03a63b8a3426b7a487f2ea7.png][]

Bertha 。/ 2022年09月03日 01:29/ 0 赞/ 207 阅读

相关 CSS3的4大伪元素选择器详解

　　在CSS3开发中，常见的伪元素选择器主要有4种，下面就和大家一起来扒一扒。 first-line伪元素选择器　　我们在这个后面接着来写，我们写一个段落 <p>

小鱼儿/ 2022年07月12日 21:14/ 0 赞/ 309 阅读

相关 CSS3练习之通用兄弟选择器、伪元素选择器

![20170115174553325][] 点击按钮出现各图片： ![20170115174631935][] <!doctype html> <

向右看齐/ 2022年07月11日 01:43/ 0 赞/ 244 阅读

相关 CSS伪元素选择器

伪元素选择器 < !–隐藏标签–> 每个标签都有开始：before 结束：after <p> <before> </before> < !--默

水深无声/ 2022年04月03日 12:13/ 0 赞/ 332 阅读

相关 css3系列之伪元素选择器

Pseudo-Element Selectors(伪元素选择器) 　　E::placeholder　　E::selection　 E::placeholder 　　

本是古典何须时尚/ 2021年11月23日 04:36/ 0 赞/ 252 阅读

相关 CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器）

CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器） CSS选择器的使用 1. CSS基础选择器的使用 2

缺乏、安全感/ 2021年10月30日 01:01/ 0 赞/ 434 阅读

相关 [log] css选择器、伪类、伪元素

选择器 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

以你之姓@/ 2021年09月17日 09:04/ 0 赞/ 394 阅读

相关 css伪类、伪元素选择器

`1.伪类选择器` 条件一：根据元素不同的状态，自动选择不同的样式。或条件二，直接添加一个class，再给这个class添加特定的样式。 A.伪类的语法：（

忘是亡心i/ 2021年09月14日 00:14/ 0 赞/ 531 阅读