CSS中的伪元素

CSS中的伪元素1、什么叫做伪元素?我们可以回忆一下我们之前使用的伪类的样子,较之于伪类,伪元素是像往标记文本中加入全新的HTML元素一样,而不是向现有的元素上应用类。也就是说我们直接在文本上使用span标签还是作用于span标签。2、伪类的表现形式是什么?::伪类名3、介绍一下常用的伪元素名字及其样

大家好,欢迎来到IT知识分享网。

1、什么叫做伪元素?

我们可以回忆一下我们之前使用的伪类的样子,较之于伪类,伪元素是像往标记文本中加入全新的 HTML 元素一样,而不是向现有的元素上应用类。也就是说我们直接在文本上使用span标签还是作用于span 标签。

2、伪类的表现形式是什么?

::伪类名

3、介绍一下常用的伪元素名字及其样式。

——::first-line  这个可以选择我们页面中的第一行进行更改样式。

案例如下:

<!DOCTYPE html>
<html>
    <head>
        <title>test1</title>
        <style type="text/css">
          p::first-line{
            color: red;

          }
        </style>
    </head>
    <body>
        <p>
            SHANGHAI, China (AP) China extended its crackdown on dissent into cyberspace for the first time Wednesday, sentencing a software entrepreneur to two years in prison for giving e-mail addresses to dissidents abroad.
            Lin Hai, 30, was convicted of subversion in a case that highlighted China's conflicting efforts to promote Internet use for business and education at the same time it is stamping out political activity.
            Subversion is among China's most serious crimes and is normally used against political dissidents.
            The conviction of Mr. Lin is no more than a brutal act of suppression of dissent, and China will certainly be severely criticized,'' said Albert Ho, secretary-general of the Hong Kong Alliance for the Promotion of the Democratic Movement in China.
        </p>
    </body>
</html>

结果:

CSS中的伪元素

 

 ——::before和::after 案例

<!DOCTYPE html>
<html>
    <head>
        <title>test1</title>
        <style type="text/css">
          p::first-line{
            color: red;
          }
          p::before{
            content:"balabala";
            color: greenyellow;
          }
          p::after{
            content: "henry";
            color:blue;
          }
        </style>
    </head>
    <body>
        <p>
            SHANGHAI, China (AP) China extended its crackdown on dissent into cyberspace for the first time Wednesday, sentencing a software entrepreneur to two years in prison for giving e-mail addresses to dissidents abroad.
            Lin Hai, 30, was convicted of subversion in a case that highlighted China's conflicting efforts to promote Internet use for business and education at the same time it is stamping out political activity.
            Subversion is among China's most serious crimes and is normally used against political dissidents.
            The conviction of Mr. Lin is no more than a brutal act of suppression of dissent, and China will certainly be severely criticized,'' said Albert Ho, secretary-general of the Hong Kong Alliance for the Promotion of the Democratic Movement in China.
        </p>
    </body>
</html>

显示结果:

CSS中的伪元素

 

 也就是说实际上这些伪元素都是可以加样式的,就是我们通常情况下最后面一下仅仅是加一些指向性的图标,加文字意义不是很大。

4、那么使用::after如何加图标呢?

案例:

p::after{
            content: "";
            display: block;
            width: 100px;
            height:100px;
            background-image: url("html_test/img/zhaojinmai.jpg");
            border: 1px solid black;
          }

输出结果:

CSS中的伪元素

 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/31892.html

(0)
上一篇 2023-11-07 16:15
下一篇 2023-11-14 22:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信