7、CSS伪元素选择器

2022-05-08 14:39:38

CSS伪元素选择器

学习伪元素选择器之前，我们要先了解一下什么是”伪元素“

伪元素字面理解就是假的元素，指的是并非由我们自己写的元素，而是系统自己写的元素，它并不会显示出来。

与之相对的就是真的元素，指的就是由我们自己写的元素，它就是平常我们在代码中能看到的那些元素。

在html的标签中，系统会给每个标签都加上两个伪元素

即：

开始：< before >

结束：< after >

代码

html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
</head>
<body>
    <p>
        
        这是一个段落
        
    </p>
</body>
</html>
```
由于伪代码并不显示，因此我用注释的形式表示出系统自己添加伪代码的位置

就像上面这段代码，系统会在元素的开始标签后方添加< before >伪元素标签，会在元素的结束标签前方添加< after >伪元素标签。

不管是真元素还是伪元素，它们都是元素，都拥有元素该有的特性。是元素我们就能够去改变它的内容、添加它的样式。

就像真元素改变样式时要使用各种对应的选择器，要改变伪元素的内容和样式，也需要用到选择器，它使用的是伪元素选择器。

伪元素选择器

格式：基本选择器::before {声明}

? ? ? ? ? ? ? ? ? ? 基本选择器::after {声明}

意义：表示这个基本选择器所对应的元素内的 < before >标签（< after >标签）使用声明中的样式。

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <link rel="stylesheet" href="css-pseudo-element-selector.css">
</head>
<body>
    <p>
        <!--<before>-->
        p1
        <!--<after>-->
    </p>
</body>
</html>

css

p::before {
    /*content设置伪元素的内容*/
    content: "before";
}
p::after {
    /*content设置伪元素的内容*/
    content: "after";
}

效果：

这里利用css给< p >标签内的伪元素分别添加了内容。

7、CSS伪元素选择器

以上所讲的< before >和< after >伪元素，适用于所有html元素。

而针对块级元素，还会有其他的一些伪元素。

块级元素的伪元素

第一个字母：first-letter

第一行：first-line

< first-letter >

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <link rel="stylesheet" href="css-pseudo-element-selector.css">
</head>
<body>
    <p>
        <!--<first-letter>-->这<!--</first-letter>-->是一个段落。
    </p>
</body>
</html>

css

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

效果：

7、CSS伪元素选择器

< first-line >

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <link rel="stylesheet" href="css-pseudo-element-selector.css">
</head>
<body>
    <p>
        <!--first-line中的一行有多少内容，取决于样式生效后浏览器上一行能显示多少-->
        <!--下面是字号为100px时，first-line标签的位置-->
        <!--<first-line>-->这是段落这是段落这是段落这是段<!--</first-line>-->落这是段落这是段落这是段落这是段落
        这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落
        这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落
        这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落
        这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落
    </p>
</body>
</html>

css

p::first-line {
    color: red;
    font-size: 100px;
}

效果：

7、CSS伪元素选择器

码农公寓

CSS伪元素选择器

相关文章