CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)

简介: CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)

伪元素选择器

       (1)初始伪元素选择器

       在学习特定的伪元素选择器之前,让我们先来学习一下什么是伪元素选择器:

伪元素选择器是用来选择html标签种的特定部分,而不是整个标签里面的内容。它通常用于处理那些不是由HTML标签直接表示的内容,比如首行文字、首字母或者生成的内容等等。

总结:伪元素选择器就是对基本选择器或复合选择器的修饰,是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。

       (2)伪元素的语法规范

语法规范:

/* 在选择器之后加上:: */
selector::pseudo-element {
  /* 添加的样式 */
  property: value;
}

我们使用一个下面要学习的伪元素选择器来举一下例:(只需要看伪元素选择器的组成形式即可)

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 将第一个字母的大小改为30px,并且颜色位橙色 -->
    <div>hello the world !</div>
</body>
</html>

CSS代码:

div::first-letter {
    font-size: 30px;
    color: orange;
}

从上边的代码中,我们可以更好的对伪元素选择器的语法规范进行理解。

注意:

       一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的基础选择器/复合选择器之后。

备注:

按照规范,应该使用双冒号(::)而不是单个冒号(:),以便区分伪类和伪元素。但是,由于旧版本的 W3C 规范并未对此进行特别区分,因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

这样我们就了解了伪元素选择器的语法规范了,接下来开始学习各个伪元素选择器。

先让我们看一下常见的伪元素选择器有哪些:

       (3)各个伪元素选择器

       【1】first-letter

first-letter的作用:: :first-letter会选中某(块级元素)第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格)。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 将第一个字母的大小改为30px,并且颜色位橙色 -->
    <div>hello the world !</div>
</body>
</html>

CSS代码:

div::first-letter {
    font-size: 30px;
    color: orange;
}

这就是之前我们学习伪元素选择器语法的时候使用的案例,现在我们再来看一下,我们使用first-letter伪元素选择器将首字母变为了大小30px,颜色为橙色。

       【2】first-line

first-line的作用:在某(块级元素)的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 将第一个行的大小改为20px,并且颜色位红色 -->
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt facilis velit ipsa itaque aut cupiditate incidunt eum suscipit, nulla adipisci?</div>
</body>
</html>

CSS代码:

div::first-line {
    font-size: 20px;
    color: red;
}

我们可以看到first-line伪元素选择器将第一行的字体大小变为了20px,颜色变为了红色。

       【3】selection

selection的作用:selection伪元素选择器应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 一段文字 -->
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste earum delectus laudantium commodi dolore odio quo voluptatum quae. Ipsam et ullam possimus delectus corporis eos, maiores libero distinctio eum laboriosam rerum, odio aliquam, minus repellat dolorum. Quaerat dolore corrupti ratione?</div>
</body>
</html>

CSS代码:

/* 选中的文字颜色会变为红色,背景色为天蓝色 */
div::selection {
    color: red;
    background-color: skyblue;
}

这样我们就学会了selection伪元素选择器的使用了。

       【4】placeholder

placeholder的作用:::placeholder作用于<input>或<textarea>元素中的占位文本。

让我们直接使用案例来看一下:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    用户名:<input type="text" placeholder="请输入用户名">
    <br>
    密码:<input type="password" placeholder="请输入密码">
</body>
</html>

CSS代码:

/* 文本字体为橙色,切背景为天蓝色 */
input::placeholder {
    color: orange;
    background-color: skyblue;
}

这样我们就了解了placeholder伪元素选择器的使用。

       【5】before + after

before / after的作用:before / after伪元素选择器会创建一个伪元素,其将成为匹配选中的元素的第一个 / 最后一个子元素,常通过 content属性来为一个元素添加修饰性的内容。

让我们直接使用案例来看一下:(我们使用before来做演示,after类似,只是位置不同)

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <div>199</div>
    <div>299</div>
    <div>399</div>
    <div>499</div>
</body>
</html>

CSS代码:

/* 在div的内容之前加上$符号 */
div::before {
    content: "$";
}

这样我们就学会了before伪元素选择器的使用,当然after与其类型,只不过位置为结尾。


相关文章
|
17天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
116 44
|
10天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
10 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
17天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
16 4
|
8天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
14天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
14 0
|
14天前
|
前端开发
CSS2(一):CSS选择器(2)
CSS2(一):CSS选择器(2)
10 0
|
14天前
|
前端开发
CSS2(一):CSS选择器(1)
CSS2(一):CSS选择器(1)
10 0
|
8天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
|
12天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法