CSS补充知识，content计数器等

最新推荐文章于 2024-04-20 15:14:31 发布

cracker_03

最新推荐文章于 2024-04-20 15:14:31 发布

阅读量184

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/shan_03/article/details/127559752

版权

CSS content计数器

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

使用计数器自动编号

CSS计数器根据规则来递增变量。

CSS计数器使用到以下几个属性：

counter-reset:name1 name2 创建或者重置计数器（可以同时定义多个计数器，中间用空格隔开）
counter-increment:name step 递增变量（可以递增一个或者多个）
content:counter(name) 插入生成的内容（使用伪元素before/after）
counter()或counters()函数将计数器值添加到元素

创建计数器时，必须在该标签的前一个标签或者是父标签里创建，如果定义在自己标签内是无效的。

具体应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            counter-reset: counter1;
        }
        h2{
            counter-reset: counter2;
        }
        h2::before{
            /* 先设置步长 */
            counter-increment: counter1 1;
            content: '第' counter(counter1) '篇';
        }
        p::before{
             /* 先设置步长 */
             counter-increment: counter2 1;
            content: '第' counter(counter1) '段';
        }
    </style>
</head>
<body>
    <div>
        <h2></h2>
        <p></p>
        <p></p>
        <p></p>
        <h2></h2>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>

CSS变量

css中我们可以统一设置变量方便页面维护。

声明

变量声明的时候，变量名之前加上两根连词线（--）即可。例如：

body{
    --colorA:#abd;
    --colorB:#bde
}
/*colorA、colorB是变量的名字*/

变量的使用：var()函数

var()函数是用来读取变量，如下列：

a{
    --colorA:#abdeff;
    color:var(--colorA);
}

语法：var(name, value)

值	描述
name	必需。变量名（以两条破折号开头）。
value	可选。回退值（在未找到变量时使用）。

var()函数有第二个参数，表示变量的默认值，如果该变量不存在（第一个参数），那么就是用该默认值。并且，第一个参数后面的全部算算第二个参数，不管有多少个逗号。

另外，var()函数也可以作为其他变量的值，但也仅作为其他变量的值使用：

html{
    --bar:#abdefd;
    /*作为其他变量的值*/
    --A:var(--bar);
    
    /*这种情况无效*/
    var(--bar):green;
}

变量作用域

css变量遵从css优先级的原则变量值会被覆盖

html{
    --color:blue;
}
div{
    --color:green;
}
#alert{
    --color:red;
}
*{
    color:var(--color);/*整个--color是blue*/
}

<p>
    我的颜色为 blue
</p>
<div>
    我的颜色为 green
</div>
<div id="alert">
    我的颜色为 red
</div>

CSS 变量可以有全局或局部作用域。 全局变量可以在整个文档中进行访问/使用，而局部变量只能在声明它的选择器内部使用。如需创建具有全局作用域的变量，请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。如需创建具有局部作用域的变量，请在将要使用它的选择器中声明它。

使用 JavaScript 更改变量

CSS 变量可以访问 DOM，这意味着您可以通过 JavaScript 更改它们。

//css中的代码
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

<script>
    // 获取根元素
    var r = document.querySelector(':root');

    // 创建获取变量值的函数
    function myFunction_get() {
      // Get the styles (properties and values) for the root
      var rs = getComputedStyle(r);
      // Alert the value of the --blue variable
      alert("The value of --blue is: " + rs.getPropertyValue('-     -blue'));
    }

    // 创建设置变量值的函数
    function myFunction_set() {
      // Set the value of variable --blue to another value (in          this case "lightblue")
      r.style.setProperty('--blue', 'lightblue');
    }
</script>

在媒体查询中使用变量

下面的例子中在@media中更改了--blue的值

/* 变量声明 */
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

.container {
  --fontsize: 25px;
}

/* 样式 */
body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
  font-size: var(--fontsize);
}

@media screen and (min-width: 450px) {
  .container {
    --fontsize: 50px;
  }
   :root {
    --blue: lightblue;
  }
}