用CSS來計數

lixinfang101發表於2017-12-25

在CSS中,有兩個很好用的偽元素,分別是::before和::after。也許你在看別人的程式碼時,會看到:before和:after,那是為了相容早期的瀏覽器。W3C為了將偽類和偽元素加以區分,在偽元素前面加了兩個冒號。

1.偽元素

  ::before用來將內容插入到元素的前面
  ::after用來將內容插入到元素的後面
  ::before和::after中有一個content()屬性用來生成內容。
<style type="text/css">
    .item::before{
        content : 'Hello ';
    }
    .item::after{
        content : " world"
    }
</style>
<div class="item">item</div>
複製程式碼
執行效果如下:

用CSS來計數
  需要注意的是,大部分瀏覽器將這兩個偽元素預設以行內元素顯示,有了這兩個偽元素可以減少對標籤的使用。

2.CSS計數器

  CSS有一個計數功能,就像使用變數一樣,它有以下4個屬性:
  counter-reset 建立或重置計數器;需要注意的是:當第一次使用counter-reset時,表示建立;當第二次使用時,表示重置,但需要注意的是,是同一個元素才會重置。
  counter-increment 增長計數器;
  content 生成內容;
  counter() 將計數器的值新增到元素中。
  接下來,看一個最簡單的計數器示例:
<style type="text/css">
    ul{
        list-style:none;
        counter-reset : num;
    }
    ul li::before{
        counter-increment : num;
        content : 'List-'  counter(num)  '-item ';
    }
</style>
<ul>
    <li>AAAAAAAA</li>
    <li>BBBBBBBB</li>
    <li>CCCCCCCC</li>
</ul>
複製程式碼
執行效果如下:

用CSS來計數
  它不是根據元素的個數來計算值的,而是根據counter-increment的數量來計算的。
  再看一個,稍微複雜點的示例:

<style type="text/css">
    body{
        counter-reset : num1;
    }
    h1::before{
        counter-increment : num1;
        content : 'The ' counter(num1) ' ';
    }
    h1{
        counter-reset : num2;
    }
    h2::before{
        counter-increment : num2;
        content : 'content ' counter(num1) '.' counter(num2);
    }
</style>
<h1>Title</h1>
<h2>這是一段內容。</h2>
<h2>這是一段內容。</h2>
<h1>Title</h1>
<h2>這是一段內容。</h2>
<h1>Title</h1>
<h2>這是一段內容。</h2>
<h2>這是一段內容。</h2>
<h2>這是一段內容。</h2>
複製程式碼
執行結果如下:

用CSS來計數
  利用計數器來實現獲取input checked選擇的數量。

<style type="text/css">
    body{
        counter-reset : num;
    }
    input:checked{
        counter-increment : num;
    }
    p::after{
        content : counter(num) '個'
    }
</style>
<body>
    CSS3<input type="checkbox">
    HTML5<input type="checkbox">
    Javascript<input type="checkbox">
    <p>你一共選擇了</p>
</body>
複製程式碼
執行結果如下所示:

用CSS來計數
  可以手動更改counter-increment數值大小:

<style type="text/css">
    body{
        counter-reset : num;
    }
    input:nth-of-type(1):checked{
        counter-increment : num 5;
    }
    input:nth-of-type(2):checked{
        counter-increment: num 2;
    }
    input:nth-of-type(3):checked{
        counter-increment:num 7;
    }
    input:nth-of-type(4):checked{
        counter-increment: num 1;
    }
    p::after{
        content : 'Count: ' counter(num)
    }
</style>
<body>
    5<input type="checkbox">
    2<input type="checkbox">
    7<input type="checkbox">
    1<input type="checkbox">
    <p></p>
</body>
複製程式碼
執行結果如下:

用CSS來計數

3.content的其它用途

  在content中還有兩個值:
  attr()插入標籤屬性值;
  url()插入一個外部資源(圖片,音訊,視訊或瀏覽器支援的其它任何資源)。
<style type="text/css">
    .box a{
        position:relative;
    }
    .box a img{
        width:200px;
    }
    .box a::after{
        content : attr(title);
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:25px;
        line-height:25px;
        text-align:center;
        background-color:#ccc;
        color:#fff;
    }
</style>
<body>
    <div class="box">
        <a href="javascript:;" title="這是一個logo">
            <img src="images/logo.png">
        </a>
    </div>
</body>
複製程式碼
執行結果如下:

用CSS來計數
  偽元素的意義就在於它可以使HTML更加語義化。有時候為了某些效果,不得不新增一些沒有意義的標籤,而這兩個偽元素既能起到這種輔助佈局的作用,又不需要新增沒有意義的標籤。

相關文章