css伪元素以及counter计数器

-

css的伪类有：::before、::after、::first-letter、::first-line、::selection

::before、::after 用于在元素之前之后插入内容。

::first-line、 ::first-letter用于改变元素 首行、首字母样式。

::selection 用于改变选中样式

.wrap .p::first-line{
    color: RED; /* 首行变红 */
}
.wrap .p::first-letter{
    color: blue; /* 首字母变篮 */
}
.wrap .p::selection{
    color: green; /* 选中文字变绿 */
}

::before、::after有content属性，用来插入内容

接下来主要介绍content中的counter（计数器）属性

1、css计数器通过一个变量来设置，根据规则递增变量。

2、使用计数器自动编号

-  counter-reset  创建或重置计数器

-  counter-increment  递增变量

- content  插入生成的内容

- counter()或counters()函数   将计数器添加到元素

 

使用计数器：

body{
    counter-reset: my; /* 创建计数器 */
}
.p::before{
    counter-increment: my; /* 计数器递增 */
    content: counter(my)'哈' /* 用counter函数把计数器插入到元素中 */
}

效果

 

 

 

 

 

-