CSS 内容生成属性-KeepStudy

CSS 内容生成属性

| 属性 | 说明 | CSS |
|-----|-----|-----|
| content | 与 :before 以及 :after 伪元素配合使用，来插入生成内容 | 2 |
| counter-increment | 递增或递减一个或多个计数器 | 2 |
| counter-reset | 创建或重置一个或多个计数器 | 2 |
| quotes | 设置嵌套引用的引号类型 | 2 |
| crop | 允许replaced元素只是作为一个对象代替整个对象的矩形区域 | 3 |
| move-to | 从流中删除元素，然后在文档中后面的点上重新插入。 | 3 |
| page-policy | 判定基于页面的给定元素的适用于计数器的字符串值 | 3 |

## content 属性
- 属性值
    - none：设置Content，如果指定成Nothing
    - normal：设置content，如果指定的话，正常，默认是"none"（该是nothing）
    - counter：设定计数器内容
    - attr(attribute)：设置Content作为选择器的属性之一。
    - string：设置Content到你指定的文本
    - open-quote：设置Content是开口引号
    - close-quote：设置Content是闭合引号
    - no-open-quote：如果指定，移除内容的开始引号
    - no-close-quote：如果指定，移除内容的闭合引号
    - url(url)：设置某种媒体（图像，声音，视频等内容）
    - inherit：指定的content属性的值，应该从父元素继承

```css
a:after{
  content: " (" attr(href) ")";
}
```

## counter-increment 属性
- counter-increment属性递增一个或多个计数器值。
- counter-increment属性通常用于counter-reset属性和content属性。
- 属性值
    - none：没有计数器将递增
    - id number：id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
    - inherit：指定counter-increment属性的值，应该从父元素继承

## counter-reset 属性
- counter-reset属性创建或重置一个或多个计数器。
- counter-reset属性通常是和counter-increment属性，content属性一起使用。
- 属性值
    - none：没有计数器将递增
    - id number：id 定义将增加计数的选择器、id 或 class。number 定义增量。number 可以是正数、零或者负数。
    - inherit：指定counter-increment属性的值，应该从父元素继承

```css
body{
  counter-reset:section;
}
h1{
  counter-reset:subsection;
}
h1:before{
  counter-increment:section;
  content:"Section " counter(section) ". ";
}
h2:before{
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
}
```

顶部

CSS属性

目录

相关推荐