学习笔记：伪类的应用（after/before/nth-child）

最新推荐文章于 2022-09-15 15:55:52 发布

Paris one

最新推荐文章于 2022-09-15 15:55:52 发布

阅读量569

点赞数

本文链接：https://blog.csdn.net/jianchibuxie0/article/details/103135628

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS伪类</title>
        <style type="text/css">
           *{
               margin:0;
               padding:0;
               font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
               font-size: 14px;
           }
           .box{
               margin:20px auto;
               width:300px;
               padding:30px;
               border:1px dashed green; 
           }
           .box p{
               line-height: 30px;
           } 
           .box p:before{  /*before after:在一个元素标签前/后创建一个
           新的虚拟标签，可以给虚拟标签加样式和内容*/
               display:block;
               height:30px;
               line-height: 30px;
               text-align: center;
               content:"珠峰";
               background: lightblue;
           }
           .box p:after{
               display:block;
               height:30px;
               line-height: 30px;
               text-align: center;
               content:"珠峰";
               background: lightgreen;
           }
           .clear{
               zoom:1;
           }
           .clear:after{
               display:block;
               width:0;
               height:0;
               content:"";
               overflow:hidden;
               clear:both;
           }
           ul,li{
               list-style:none;
           }
           .list{
               width:300px;
               margin:20px auto;
               border:1px solid #000;
               padding:30px;
           }
           .list li{
               width:100px;
               float:left;
               height:100px;
               background: lightyellow;
           }
           .list li:nth-child(4n+1){ /*让各块颜色不一样，括号里面自行设置*/
               background:red;
           }
           .list li:nth-child(4n+2){
               background: orange;
           }
           .list li:nth-child(4n+3){
               background: yellow;
           }
           .list li:nth-child(4n+4){
               background: green;
           }
        </style>
    </head>
    <body>
        <div class="box">
         <p>
                     在互联网技术高速发展的今天,我们已经进入到了一个充满信息化技术的时代,
                     信息技术的发展俨然已经成为我国社会发展的重要战略资源,因此各个国家以及企业
                     对于信息的竞争也演变的越来越激烈。信息安全一直以来都是国家安全与社会安全的
                     基石，它全方位的影响着我国的经济、政治、文化、社会、军事生活的各个方面,是影
                     响我国发展与长远利益的一个重大问题。
         </p>
        </div>
        <ul class="list clear">  <!--清除浮动，加上clear-->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script type="text/javascript"></script>
    </body>
</html>

Paris one

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记：伪类的应用（after/before/nth-child）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS伪类</title> <style type="text/css"> *{ ma...
复制链接

扫一扫