不想被别人看到的杂七杂八

最新推荐文章于 2024-05-12 23:13:30 发布

sunyueru

最新推荐文章于 2024-05-12 23:13:30 发布

阅读量231

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/sunyueru/article/details/75425856

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言：最近学的知识都比较杂乱，而且有些都没有深入的学习，比如canvas绘图。看有些大神太厉害了。。。在这里就简单记一下今天学的内容吧，方便之后自己复习。

counter计数器与编号
多栏布局的几个属性
css的伪类选择器和伪元素选择器

一、counter计数器
counter-reset和counter-increment两个关键属性

这里写图片描述

<style type="text/css">
        h1:before{
         /*自己定义计数器的名称*/
            content: counter(title)".";
        }
        h1{
        /*counter-increment后面的名称和上面的统一*/
            counter-increment: title;
            /*在要重置的标题的父级添加*/
            counter-reset: subtitle;
        }
        h2:before{
        /*用引号隔开自己添加的内容*/
            content: counter(title) "-" counter(subtitle);
        }
        h2{
            counter-increment: subtitle;
        }
    </style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
</body>

简单解释：
使用：before{
content：
}
给h1之前添加内容，此处是添加计数器（counter）
定义计数器->counter：计数器的名称(默认的是阿拉伯数字形式)
设置自增属性->counter-increment:计数器名称
counter-reset属性是用在要重置编号的元素的父元素
counter-reset：需要重置的计数器所在的div的计数器名称

二、多栏布局的几个属性
column-count，column-width，column-gap，column-rule
几个属性都很通俗易懂。

这里写图片描述

<style type="text/css">
        .div1{
            width: 100%;
            column-width: 150px;
            -webkit-column-width:150px;
            -moz-column-width:150px;
            column-count: 4;
            -webkit-column-count:4;
            -moz-column-count:4;
            column-gap: 100px;
            -webkit-column-gap:100px;
            -moz-column-gap:100px;
        }
        .div2{
            width: 100%;
            height: 300px;
            line-height: 300px;
            background-color: grey;
            color: #fff;
        }
    </style>