CSS选择器

CSS选择器

一 基本选择器

-1. id选择器

-1.1 作用

  • 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性.

-1.2 格式

  • #id名称 {

    ​ 属性值: 值;

    }

-1.3 注意点

  • 在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的
  • 每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复
  • 引用id一定要加#
  • id的命名只能由字符,数字,下划线组成,且不能以数字开头,更不能是html关键字如p,a,img等

-1.4 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* #p_id表示的就是id选择器
        {} 内的为声明 属性 和 对应的值
        */
        #p_id {
            color: greenyellow;
            font-size: x-large;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>id选择器</h1>
    <!-- 设置唯一的id p_id -->
    <p id="p_id">  
        我是一段有意思也没有意思的段落,我有一个<strong>唯一</strong>id.
    </p>
</body>
</html>

-2. class 类选择器

-2.1 作用

  • 根据指定的类名称,在当前界面中找到对应的标签,然后设置属性

-2.2 格式

  • .类名称 {

    ​ 属性: 值;

    }

-2.3 注意点

  • 类名就是专门用来给某个特定的标签设置样式的
  • 每个标签可以设置一个或多个 class(空格分割),class就相当于人/标签的名称,因此统一界面内class可以重复
  • 引用class一定要加点.
  • 类名的命名规则与id的命名规则相同

-2.4 例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* .c_1为类选择器 
        {} 内的为属性 和 对应的值
        */
        .c_1 {
            color: pink;
            font-size: x-large;
        }
        .c_2 {
            color: greenyellow;
            font-size: large;
        }
        .c_3 {
            color: blue;
            font-size: larger;
        }
    </style>
</head>
<body>
    <h1>类选择器</h1>
    <div>
        <!--  class为类属性 值可以为多个      -->
        <p class="c_1">
            我是第一行内容,我有一个class属性为c_1
        </p>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
        <p class="c_2">我是第2行内容,我有一个class属性为c_2</p>
        <p class="c_1 c_3">我是第3行内容,我有class属性为c_1和c_3</p>
        <p class="c_1 c_2">我是第4行内容,我有class属性为c_1 和 c_2</p>
        <p class="c_2 c_3">我是第5行内容,我有class属性为c_2和 c_3</p>
    </div>
</body>
</html>

-3. 标签选择器

-3.1 作用

  • 根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

-3.2 格式

  • 标签名称 {

    ​ 属性: 值;

    }

-3.3 注意点

  • 只要是HTML的标签都能当作标签选择器
  • 标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
  • 标签选择器,无论嵌套多少层都能选中

-3.4 例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* p为标签选择器
         {} 中的内容为 属性 和 对应的值
         */
        p {
            color: pink;
            font-size: x-large;
            text-align: center;
        }
        a {
            text-decoration-line: none;
            color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- html文件中的所有标签都是一个标签名选择器的对象 -->
    <h1>标签选择器</h1>
    <ul>
        <li>
            <ul>
                <li>你好啊</li>
            </ul>
            <ul>
                <li>
                    <p>你也好啊</p>
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li>
                    <p>
                        <a href="http://www.baidu.com" target="_blank">点我到百度</a>
                    </p>
                </li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
        <li>
            <ul>
                <li>
                    <a href="#">点我会顶部</a>
                </li>
            </ul>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>
</body>
</html>

-4. * 匹配符选择器

-4.1 作用

  • 选择所有标签

-4.2 格式

  • * {

    ​ 属性: 值;

    }

-4.3 注意点

  • 在企业开发中一般不会使用通配符选择器

    因为通配符选择器是设置界面上的所有的标签的属性,所以在设置之前会遍历所有的标签,

    如果当前界面的标签比较多,那么性能就会比较差

-4.4 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            color: greenyellow;
            font-size: x-large;
        }
    </style>
</head>
<body>
    <h1>通配符选择器 * </h1>
    <div>
        <p> * 代表可以匹配上所以的标签~~</p>
        <ul>
            <li>我也可以匹配上</li>
        </ul>
        <a href="#">我也可以匹配上</a>
    </div>
</body>
</html>

补充: 一般搭页面都会将标签的起始样式给取消,所以就有一个css的起始文件

如:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration: none;
}

二 组合选择器

-1. 后代选择器

-1.1 作用

  • 找到指定标签的所有后代标签(儿子,孙子,重孙子...),设置属性

-1.2 格式

  • 普通选择器1 普通选择器2 ...{

    ​ 属性: 值

    }

-1.3 注意

  • 后代选择器必须用空格隔开
  • 后代不仅仅是儿子,也包括孙子,重孙子
  • 后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class
  • 后代选择器可以通过空格一直延续下去

-1.4 例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 为 div下面的p标签设置样式*/
        div p {
            color: pink;
            font-size: x-large;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

-2. 子元素选择器

-2.1 作用

  • 找到指定标签的所有特定的直接子元素,然后设置属性
  • 即给亲儿子设置属性

-2.2 格式

  • 标签名1>标签2 {

    ​ 属性: 值

    }

  • 先找到名称叫做标签名称1的标签,然后在整个标签中查找所有直接子元素名称叫做标签名称2的元素

-2.3 注意

  • 子元素选择器之间需要用>符号链接, 并不能有空格

    比如 div >p会找div标签的所有后代标签,并签名为>p

  • 子元素选择器只会查找儿子,不会查找其他嵌套的标签.

  • 子元素选择器不仅可以用标签名称,还剋有使用其他选择器,比如id或``class`

  • 子元素选择器可以通过>符号一直延续下去

-2.4 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 为 div下面的直属p标签设置样式,即儿子标签为p的标签*/
        div>p {
            color: pink;
            font-size: x-large;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

-3. 毗邻选择器,CSS2退出 (又称相邻兄弟选择器)

-3.1 作用

  • 选定紧跟其后的那个标签

-3.2 格式

  • 选择器1+选择器2 {

    ​ 属性: 值;

    }

-3.3 注意点

  • 毗邻选择器必须通过+号链接
  • 毗邻选择器只能选中紧跟其后娥那个标签,不能选中被隔开的标签

-4. 弟弟选择器, CSS3 推出(又称通用兄弟选择器)

-4.1 作用

  • 给指定选择器后面的所有选择器中的所有标签设置属性

-4.2 格式

  • 选择器1~选择器2 {

    ​ 属性: 值

    }

-4.3 注意点

  • 通过兄弟选择器必须必须用~来链接

  • 通过兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签

    无论也没有被隔开,都可以被选中

-4.4 举例 (和毗邻选择器一起)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* h1+p是一个毗邻选择器, 会选中h1标签后面紧跟的p标签
         被其他标签隔开就选不到
         */
        h1+p {
            color: red;
            font-size: x-large;
            text-align: center;
        }

        /* h1~p是一个弟弟选择器,子元素选择器, 会选中h1标签后面所有的兄弟p标签
         不是相同等级的选择不上
         */
        h1~p {
            color: yellow;
            font-size: larger;
            text-align: right;
        }
    </style>
</head>
<body>
    <p>我是段落,在h1的上面</p>
    <h1 >我是标题1</h1>
    <a href="">有了这个标签，p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <a href="">
        <p>我是段落</p>
    </a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题2</h1>
    <p>我是段落</p>
</body>
</html>

三 交集选择器 与 并集选择器

-1. 交集选择器(不常用)

-1.1 作用

  • 给所有选择器选中的标签中,相交的那部分标签设置属性

-1.2 格式

  • 选择器1选择器2 {

    ​ 属性: 值;

    }

-1.3 注意点

  • 选择器与选择器之间没有任何链接符号

  • 选择器可以使用标签名称id,class

  • 交集选择器在企业开发中并不多见.

    因为p.part1完全可以用.part1取代

    如果在多个标签中都有相同的类名,才用,但是我完全可以换一个类名.

-1.4 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* p.part1是一个交集选择器 匹配的是不仅是p标签,而且有类属性为part1的所有p标签
         {} 内为 属性 和 对应的值
         */
        p.part1 {
            color: pink;
            font-size: x-large;
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <span class="part1"></span>
</body>
</html>

-2. 并集选择器

-2.1 作用

  • 给所有满足条件的标签设置属性

-2.2 格式

  • 选择器1,选择器2 {

    ​ 属性: 值;

    }

-2.3 注意点

  • 选择器与选择器之间必须用,来链接
  • 选择器可以使用标签名称,id,class

-2.4 举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        /* h1,p是一个并集选择器, 可以匹配所有h1标签和p标签
        {} 内为 属性 和 对应的值
        */
        h1,p {
            background-color: yellowgreen;
            font-size: x-large;
            align-content: center;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是超链接标签内的内容</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

四 序列选择器

-1. 作用

  • css3中新推出的选择器,最具有代表性的9个,又称为序列选择器,过去的选择器中要选中某个必须加id或class.
  • 学习了这个选择器,不用加id或class,想选中同级别的第几个就选第几个

-2 格式

-2.1 同级别

  • :first-child 同级别的第一个
    • 如:p:first-child
  • :last-child 同级别的最后一个
    • 如:p:last-child
  • :nth-child(n) 同级别的第n个
  • :nth-last-child(n) 同级别的倒数第n个

-2.2 同级别同类型

  • :first-of-type 同级别同类型的第一个
  • :last-of-type: 同级别同类型的最后一个
  • :nth-of-type(n) 同级别同类型的第n个
  • :nth-last-of-type(n) 同级别同类型的倒数第n个

-2.3 其他

  • only-of-type 同级别且同类型的唯一一个
  • only-child 同级别的唯一一个

-3 例子

-3.1 同级别例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-child是一个序列选择器
        表示选中 所有同级别标签中第一个是p标签的
        {} 内为样式 属性: 值
        被选中的为段落1(第一个p标签)和段落6(第6个p标签)
        */
        p:first-child {
            background-color: red;
        }

        /* p:last-child表示一个序列选择器
        表示选中 所有同级别标签中的最后一个是p标签的
        该文件中被选中的段落6(第6个p标签)
        */
        p:last-child {
            color: white;
        }

        /*  p:nth-child(2)表示的是一个序列选择器
        表示选中 所有同级别标签中的第2个标签是p标签的
        选中了段落2(第2个p标签)
        */
        p:nth-child(2) {
            color: blue;
        }

        /*  p:nth-last-child(2)表示的是一个序列选择器
        表示选中 所有同级别标签中的倒数第2个标签为p标签的
        选中了段落5(第5个p标签)
        */
        p:nth-last-child(2) {
            color: yellow;
        }
    </style>
</head>
<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    <div>
        <p>我是段落6</p>
    </div>
</body>
</html>

-3.2 同级别同类型的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器之同级别同类型</title>
    <style>
        /* p:first-of-type 同级别同类型选择器
        在所有同级别且同类型的标签中 p标签的第一个标签,即同级别中的第一个p标签
        这里匹配上了 段落1 和 段落6.1, 即 这俩个段落字体变红了
        */
        p:first-of-type {
            color: red;
        }

        /* p:last-of-type 同级别同类型选择器
        在所有同级别且同类型的标签中 p标签的最后一个标签,即同级别中的最后一个p标签
        这里匹配上了 段落7 和 段落6.2,即这俩个段落字体变紫色了
        */
        p:last-of-type {
            color: pink;
        }
        
        /* p:nth-of-type(2) 同级别同类型选择器
        在所有同级别且同类型的标签中 p标签的第二个标签
        这里匹配上了 段落2 和 段落 6.2 即,这俩个段落的字体变绿色了 
        */
        p:nth-of-type(2) {
            color: green;
        }
        
        /* p:nth-last-of-type(2) 同级别同类型选择器
        在所有同级别且同类型的标签中 p标签的倒数第二个标签
        这里匹配上了 段落5 和 段落 6.1 即,这俩个段落的字体变蓝色了 
        */
        p:nth-last-of-type(2) {
            color: blue;
        }
        /* 因为html是dom文档流,所有解析从上往下,所以后面设置的会覆盖掉前面设置了
        ,这里的颜色覆盖就不必细究了 */
        
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    <div>
        <!-- <h1>我是标题</h1> -->
        <p>我是段落6.1</p>
        <p>我是段落6.2</p>
        <h1>我是标题</h1>
    </div>
    <p>我是段落7</p>
</body>
</html>

-3.3 其他示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列选择器之其他</title>
    <style>
        /* p:only-child 序列选择器之其他
           匹配同级别中只有一个p标签的标签p
           这里匹配上的为段落3
        */
        p:only-child {
            color: yellowgreen;
        }

        /* p:only-of-type 序列选择器之其他
            匹配同级别且同类型中只有一个p标签的标签p
            这里匹配上了段落2 和 段落3
        */
        p:only-of-type {
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <div>
        <p>我是段落1.1</p>
        <p>我是段落1.2</p>
        <h1>我是标题</h1>
    </div>
    <p>我是段落2</p>
    <div>
        <p>我是段落3</p>
    </div>
</body>
</html>

五 属性选择器

-1. 作用:

  • 根据指定的属性名称找到对应的标签,然后设置属性

    该选择器,最常用于input标签

-2. 格式与具体用法

-2.1 格式

  • [属性名]
  • 其他选择器[属性名]
  • [属性名=值]
  • [属性名^=值]
  • [属性名$=值]
  • [属性名*=值]

-2.2 例子

<!--例1: 找到所有包含id属性的标签 -->
[id]

<!--例2:找到所有包含id属性的p标签 -->
p[id]

<!--例3: 找到所有class属性值为part1的p标签 -->
p[class="part1"]

<!--例4: 找到所有href属性值以https开头的a标签 -->
a[href^="https"]

<!-- 例5:找到所有src属性值以png结尾的img标签 -->
img[src$="png"]

<!-- 例6: 找到所有class属性值中包含 part2的标签 -->
[class*="part2"]

-3. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>

        /* 属性选择器 [id]
        表示匹配所有设置了id属性的标签
        这里匹配上了h1标签和段落1标签, 字体颜色变为了红色
        */
        [id] {
            color: red;
        }
        
        /* 属性选择器 p[id]
        表示匹配所有p标签中设置了id属性的标签
        这里匹配上了段落1标签, 字体颜色变为了紫色
        */
        p[id] {
            background-color: darkviolet;
        }
        
        /* 属性选择器 p[class="part1"]
        表示匹配所有设置了class属性的为part1的p标签
        这里匹配上了段落2标签, 字体颜色变为了黄绿色
        */
        p[class="part1"] {
            color: yellowgreen;
        }
        
        /* 属性选择器 p[class*="part2"]
        表示匹配所有设置了class属性的值里面有part2字符的p标签
        这里匹配上了段落3标签, 字体颜色变为了蓝色
        */
        p[class*="part2"] {
            color: blue;
        }
        
        /* 属性选择器 a[href^="http"]
        表示匹配所有设置了href属性的值以http开头的a标签
        这里匹配上了后面俩个a标签, 文本下划线取消了
        */
        a[href^="http"] {
            text-decoration-line: none;
        }
        
        /* 属性选择器 img[src$=".jpg"]
        表示匹配所有设置了src属性的值以.jpg结尾的img标签
        这里匹配上了前面俩个img标签, 加了20px的外边距,宽度变为600px,外边框红色实体5px
        */
        img[src$=".jpg"] {
            margin-top: 20px;
             600px;
            border: 5px red solid;
        }

    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落1</p>
    <p class="part1">我是段落2</p>
    <p class="xxx part2 yyy">我是段落3</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <br>
    <img src="1.jpg" alt="">
    <img src="2.jpg" alt="">
    <img src="3.png" alt="">
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

六 伪类选择器

-1. 作用

  • 为a标签和input标签加事件,一般标签也可以加但是只能加:hover和:active

-2. 常用的几种伪类选择器

-2.1 没有访问的超链接a标签样式

  • a:link {

    ​ 属性: 值;

    }

-2.2 访问过的超链接a标签样式

  • a:visited {

    ​ 属性: 值;

    }

-2.3 鼠标悬浮在元素上应用样式

  • a:hover {

    ​ 属性: 值;

    }

-2.4 鼠标点击瞬间的样式

  • a:active {

    ​ 属性: 值;

    }

2.5 input 输入框获取焦点时样式

  • input:focus {

    ​ 属性: 值;

    }

-3. 注意

  • a标签的伪类选择器可以单独出现,也可以一起出现.

  • a标签的伪类选择器如果一起出现,有严格的顺序要求,否则失效.

    link-->visited-->hover-->active

  • hover是所有其他标签都可以使用的

  • focus只给input标签使用

-4. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /* 伪类选择器 a:link
        表示a标签内的内容没有被访问过时样式 为红色
        */
        a:link {
            color: red;
        }
        /* 表示a标签在被点击时的样式 为绿色 */
        a:visited {
            color: green;
        }
        /* 为鼠标悬浮在a标签上面时候的样式 为黄色 */
        a:hover {
            color: yellow;
        }
        /* 为a标签被访问后的样式 为黑色 */
        a:active {
            color: black;
        }
        /* input:focus 
        focus只能给input标签添加伪类选择器
        为input输入框获取焦点时的样式 背景颜色为黄色 */
        input:focus {
            background-color: yellow;
        }

        /* 别的标签没有:link和:visited伪类选择器,只有:hover和:active这俩种 */
        /*p:link {*/
        /*    color: blue;*/
        /*}*/
        /*p:visited {*/
        /*    color: red;*/
        /*}*/
        /*p:focus {*/
        /*    background-color: red;*/
        /*}*/
        p:hover {
            color: pink;
        }
        p:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="#">点击我</a>
    <input type="text">
    <p>我是一个段落</p>
</body>
</html>

七 伪元素选择器

-1. 常用的伪元素

-1.1 first-letter

  • 作用: 杂志类文章首字母样式调整
  • 例如:
p:first-letter {
    font-size: 48px;
}

-1.2 before

  • 作用: 用于在元素的内容前面插入新内容

  • 例如:

    p:before {
    content: "*";
    color: red;
}

-1.3 after

  • 作用: 用于在元素的内容后面插入新内容

  • 例如:

    p:after {
    content: "?";
    color: greed;
}

-2. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /* p:first-letter是一个 伪元素选择器
        为p标签的首字符 设计样式
        这里将所有的p标签内首字母变成了50px  
        */
        p:first-letter {
            font-size: 50px;
        }
        
        /* p[class]:before是一个 伪元素选择器
        在p标签的的前面插入内容
        这里将所有的p内有class属性的标签前面插入了字符 "我是插入进来的" 颜色为pink 
        */
        p[class]:before {
            content: "我是插入进来的";
            color: pink;
        }
    
        /* a:after是一个 伪元素选择器
        为a标签的的后面插入内容
        这里将所有的a标签后面插入了字符 "开挖掘机的" 颜色为红色 
        */
        a:after {
            content: "开挖掘机的";
            color: red;
        }
    </style>
</head>
<body>
    <p>英雄不问出处，流氓不论岁数</p>
    <p class="p2">
        There are moments in life when you miss someone so much that you just want to pick them
        from your dreams and hug them for real! Dream what you want to dream;go where you want to go;
        be what you want to be,because you have only one life and one chance to do all the things you
        want to do.
    </p>
    <a href="#" class="help">老男孩是干什么的</a>
    <a href="#" class="help">老男孩是干什么的</a>
    <a href="#" class="help">老男孩是干什么的</a>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jkeykey/p/14476775.html