网页设计中的伪类与伪元素：让网页更具动感

13 iug^

于 2024-10-22 20:40:22 发布

阅读量810

点赞数 21

文章标签： css 前端 html dubbo

本文链接：https://blog.youkuaiyun.com/2401_87197766/article/details/143134584

版权

一、区分异同

伪类和伪元素是CSS中的两种特殊选择器，用于选择元素的特定状态或部分，并为其应用样式。‌ 伪类和伪元素的区别在于它们的选择范围和目的不同。伪类用于选择元素的特定状态，如鼠标悬停、获得焦点等，而伪元素选择元素的特定部分或生成内容，如元素的首行、首字母等。此外，伪类主要用于描述元素的动态状态，而伪元素主要用于添加不在文档结构中的内容或样式‌。

二、伪类

1、概念：

伪类（Pseudo-classes）是CSS中的一种选择器，用于选择处于特定状态的元素。它们以冒号(:)开头，例如用于选择鼠标悬停在元素上的状态，用于选择被点击的元素状态，用于选择获得焦点的表单元素状态等。

在默认的浏览器方式下，超链接统一为蓝色并且带有下画线。访问过的超链接则为紫色并且也有下画线。如下：

代码如下：

<body>
    <a href="https://www.baidu.com/">百度一下，你就知道</a>
</body>

快复制代码试试吧！

2、属性：

伪类中通过:link、:visited、:hover 和:active来控制链接内容访问前、访问后、鼠标指针悬停时，以及用户激活时的样式。需要说明的是，这4种状态的顺序不能颠倒，否则可能会导致伪类样式不能实现。如下:(复制代码去试试吧)

<head>
    <style>
        .clear_ele a{
            text-decoration: none;
        }
         .clear_ele a:link{
            color: black;
         }
         .clear_ele a:visited{
            color: pink;
         }
         .clear_ele a:hover{
            color: brown;
         }
         .clear_ele a:active{
            color: brown;
         }
    </style>
</head>
<body>
    <section class="clear_ele">
        <a href="https://www.baidu.com/">百度一下，你就知道</a>
    </section>
</body>

三、伪元素

1、概念：

伪元素（Pseudo-elements）也是CSS中的一种选择器，用于选择元素的特定部分或在元素之前或之后生成内容，而不是整个元素本身。伪元素允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。

2、属性：

伪元素的语法以::(双冒号)作为前缀即以双冒号(::)开头，例如::before和::after用于在元素内容的前后插入生成的内容，伪元素允许开发者在不修改文档结构的情况下，为元素的特定部分添加样式。

3、应用

伪元素选择器是实际工程项目开发中用的解决高度塌陷的主流方案，如下：

<head>
    <style>
            section{
                    border: 2px black solid;
                    background-color: gray;
                }
            #div1{
                width: 15%;
                height: 100px;
                background-color: #f0b4b9;
                border: 5px solid #000;
                margin-bottom: 5px;
                float: left;
             }
 
             #div3{
                width: 10%;
                height: 100px;
                background-color: #44ac8c;
                border: 5px solid #000;
                margin-bottom: 5px;
                float: left;
             }
            footer{
                width: 100%;
                height: 200px;
                background-color: #5172c6;
            }
         
         .clear_ele::after{
                /* 空盒子，盒子存在，没有内容，是必须配置的属性 */
                    content: "";
                    display: block;   
                    clear:both;
    
            }
    </style>
</head>
<body>
    <section class="clear_ele">
        <!-- ::before -->
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
         <!-- ::after -->
    </section>

     <footer>网页页脚</footer>  
</html>
</body>

没有添加前效果如下：