亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

CSS 基礎(chǔ)教程

CSS 盒子模型

CSS3基礎(chǔ)教程

CSS 參考手冊

CSS @規(guī)則(RULES)

CSS Counter(計數(shù)器)

CSS counter計數(shù)器類似于變量。這些由CSS維護(hù)，并且這些值可以由CSS規(guī)則遞增以跟蹤它們的使用次數(shù)。其主要用途是，可以通過指定的規(guī)則來計算節(jié)點元素的使用次數(shù)。

CSS counter計數(shù)器有助于基于CSS的簡單遞增和顯示生成內(nèi)容的數(shù)字。

CSS計數(shù)器屬性

以下是與CSS計數(shù)器一起使用的屬性的列表：

  • counter-reset：用于創(chuàng)建或重置計數(shù)器。

  • counter-increment：用于增加計數(shù)器值。

  • content：用于插入生成的內(nèi)容。

  • counter()或counters()函數(shù)：用于將計數(shù)器的值添加到元素。

注意：在使用CSS計數(shù)器之前，必須使用counter-reset創(chuàng)建它。

CSS Counter在線示例

讓我們舉個實例，為頁面創(chuàng)建一個計數(shù)器，并為每個下一個元素增加計數(shù)器的值。

請參閱以下示例：

<!DOCTYPE html>  
<html>      
<head>  
<style>  
body {  
    counter-reset: section;  
}  
h2::before {  
    counter-increment: section;  
    content: "Section " counter(section) ": ";  
}  
</style>  
</head>  
<body>  
<h1>CSS Counters計數(shù)器示例:</h1>  
<h2>Java Tutorial</h2>  
<h2>HTML Tutorial</h2>  
<h2>CSS Tutorial</h2>  
<h2>Oracle Tutorial</h2>  
<p><strong>Note:</strong> IE8 瀏覽器下使用需聲明!DOCTYPE.</p>  
</body>  
</html>
測試看看?/?
注意：在上面的示例中，您可以看到在主體選擇器中為頁面創(chuàng)建了一個計數(shù)器，它為每個h2元素增加了計數(shù)器值，并在每個元素的開頭添加了“ Section <計數(shù)器的值>：”h2元素。

CSS嵌套計數(shù)器

您也可以在計數(shù)器內(nèi)創(chuàng)建計數(shù)器。這稱為計數(shù)器嵌套。讓我們以一個示例來演示嵌套計數(shù)器。

請參閱以下示例：

<!DOCTYPE html>  
<html>  
<head>  
<style>  
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) " ";  
}  
</style>  
</head>  
<body>  
<h1>Java tutorials:</h1>  
<h2>Core Java tutorial</h2>  
<h2>Servlet tutorial</h2>  
<h2>JSP tutorial</h2>  
<h2>Spring tutorial</h2>  
<h2>Hibernate tutorial</h2>  
  
<h1>Web technology tutorials:</h1>  
<h2>HTML tutorial</h2>  
<h2>CSS tutorial</h2>  
<h2>jQuery tutorial</h2>  
<h2>Bootstrap tutorial</h2>  
  
<h1>Database tutorials:</h1>  
<h2>SQL tutorial</h2>  
<h2>MySQL tutorial</h2>  
<h2>PL/SQL tutorial</h2>  
<h2>Oracle tutorial</h2>  
<p><strong>Note:</strong> 只有在指定了!DOCTYPE的情況下，IE8才支持這些屬性。</p>  
</body>  
</html>
測試看看?/?

注意：在以上示例中，您可以看到為該節(jié)創(chuàng)建了一個計數(shù)器，并在該節(jié)中創(chuàng)建了另一個名為subsection的嵌套計數(shù)器。

不同級別的嵌套計數(shù)器

您可以使用嵌套計數(shù)器創(chuàng)建輪廓列表。它有助于您在不同級別的嵌套計數(shù)器之間插入字符串。

請參閱以下示例：

<!DOCTYPE html>  
<html>  
<head>  
<style>  
ol {  
    counter-reset: section;  
    list-style-type: none;  
}  
  
li::before {  
    counter-increment: section;  
    content: counters(section,".") " ";  
}  
</style>  
</head>  
<body>  
<h2>不同的嵌套級別的計數(shù)器</h2>  
<ol>  
  <li>item</li>  
  <li>item  
    <ol>  
      <li>item</li>  
      <li>item</li>  
      <li>item  
        <ol>  
          <li>item</li>  
          <li>item</li>  
          <li>item</li>  
        </ol>  
      </li>  
      <li>item</li>  
    </ol>  
  </li>  
  <li>item</li>  
  <li>item</li>  
</ol>  
<p><strong>Note:</strong> 只有在指定了!DOCTYPE的情況下，IE8才支持這些屬性。</p>  
</body>  
</html>
測試看看?/?