Style Containment与CSS计数器限制实例页面

展示

代码

• HTML：

  <h4 class="fill">contain:none（默认）</h4>
  <div class="contain-none"></div>
  
  <h4 class="fill">contain:style</h4>
  <div class="contain-style"></div>
  

• CSS：

  html {
      counter-reset: n 2;
  }
  body {
      counter-reset: style 2;
  }
  
  .contain-none {
      counter-reset: n;
  }
  .contain-none::before, 
  .contain-none::after {
      content: counters(n, ".") " ";
  }
  .contain-none::after {
      counter-increment: n 2;
  }
  
  .contain-style {
      counter-reset: style;
      contain: style;
  }
  .contain-style::before, 
  .contain-style::after {
      content: counters(style, ".") " ";
  }
  .contain-style::after {
      counter-increment: style 2;
  }