伪元素,这不是有手就行

Posted 浪漫主义码农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了伪元素,这不是有手就行相关的知识,希望对你有一定的参考价值。

伪元素

你以为这个火箭是一张图片吗?它只是四个div,其余都是伪元素实现的效果。

伪元素是什么呢?

字面上就可以了解,伪元素–伪装的元素,就是页面不存在的元素.,用于创建一些不在DOM树中的元素,并为其添加样式。

那么我们就要区分伪元素和伪类的区别?

有没有创建一个文档树之外的元素。

我们在css3规范中要求使用双冒号(::)表示伪元素,一个冒号(:)表示伪元素,以此来区分伪类和伪元素

伪元素的使用

伪元素只有以下这些:主要应用于 设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容

选择器例子例子描述
::afterp::after在每个 p 元素之后插入内容。
::beforep::before在每个 p 元素之前插入内容。
::first-letterp::first-letter选择每个 p 元素的首字母。
::first-linep::first-line选择每个 p 元素的首行。
::selectionp::selection选择用户选择的元素部分。

::before

在元素之前插入内容 一定要使用content属性,不然没有效果,值为字符串,可以是文字可以是路径。

例子:在p标签前面添加一个图标

<body>
    <div class="main">
        <p>浪漫主义码农</p>
    </div>
</body>
<style>
    *
        padding: 0;
        margin: 0;
    
    .main
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    
    p::before
        content: url('./tx.jpg');
        margin-right: 10px;
    
</style>

效果:

::after

在元素之后插入内容
同样是上面的代码,我们把伪元素改为p::after,照片就显示在文字之后了。
一定要使用content属性,不然没有效果,值为字符串,可以是文字可以是路径。

伪元素当然也支持定位,这样我们就可以实现伪元素出现在父元素的任意位置了。

效果:

::first-letter

选择每个元素的首字母或文字,::first-letter伪元素只适用于块级元素

<body>
    <div class="main">
        <h2>浪漫主义码农</h2>
        <p>今年100岁</p>
        <h1>Good morning</h1>
    </div>
</body>
<style>
    *
        padding: 0;
        margin: 0;
    
    .main
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    
    .main ::first-letter
        background: rgb(30, 160, 199);
    
</style>

效果:

::first-line

选择每个元素的首行.::first-line 伪元素只能应用于块级元素.

例子:

<body>
    <div class="main">
        <h1>我来自中国,我喜欢打篮球。</h1>
    </div>
</body>
<style>
    *
        padding: 0;
        margin: 0;
    
    .main
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    
    .main ::first-letter
        background: red;
        font-size: 2cm;
    
    .main ::first-line
        background-color: rgb(39, 214, 245);
    
</style>

效果:

::selection

选择用户选择的元素部分

例子:

<body>
    <div class="main">
        <p>本人也是经过了深思熟虑,在每个日日夜夜思考这个问题。 现在,解决一天掉多少根头发的问题,是非常非常重要的
            了解清楚一天掉多少根头发到底是一种怎么样的存在,是解决一切问题的关键</p>
    </div>
</body>
<style>
    *
        padding: 0;
        margin: 0;
    
    .main
        width: 300px;
        height: 300px;
        margin: 240px auto;
        border: 1px solid red;
    
    .main ::selection
        background: rgb(0, 238, 255);
        color: sandybrown;
    
</style>

效果:

写在最后

伪元素了解起来很简单,但是应用确实非常的广泛,现在我们就来讲讲前面的火箭怎么实现。

首先找一个最简单的火箭,下面就是我的草图。就四个div,还有火箭的机舱,火焰,可以使用伪元素去实现。div能省则省。其实在之前中秋活动中写过火箭的实现,代码也有。我开火箭送嫦娥妹妹回月球

记录生活:

碰到的穿衣服拿着刀的可爱狗狗,超可爱。

以上是关于伪元素,这不是有手就行的主要内容,如果未能解决你的问题,请参考以下文章

vscode配置c++环境竟然是有手就行 !¿?!

C语言入门,有手就行老铁

C语言入门,有手就行老铁

多态?那不有手就行

[有手就行]filebeat零基础安装教程

[有手就行]filebeat零基础安装教程