一個很實用的css技巧簡析

我是小雨小雨，專注於更新有趣、實用內容的小夥，如果內容對大家有一點幫助，那麼就請動動手指，給個關注、點贊支援一下吧。 ^ - ^

序言

前兩天接到一個需求，其中包括一個有序的列表，我們今天就來看看這個有序怎麼做更方便、簡單。
當然，這個功能很簡單：

可以手動寫死...
可以迴圈插入dom，用索引做字首。原生迴圈或者利用框架的迴圈
也可以用三行搓手手(css)自動計數

今天主要說說如何用css來計數

原理與介紹

原理很簡單，利用偽元素的content + counter()/counters() + counter-reset + counter-increment計數四劍客即可，但是咱們需要先了解一下這幾個屬性是什麼，才能得心應手！

content(): 用於向偽元素中插入元素
counter-reset: 設定命名計數器，可設定多個。格式為 (計數器名稱初始值) (計數器名稱初始值) ...
counter-increment: 用於增加某個計數器的值，可指定增加的具體值，可設定多個，格式同上。
counter系列(支援ie8以上)

可能看完死板的定義，還不能立馬理解改如何做，所以這邊畫了個圖：

以碼為兵，馳馬試劍

咱們看兩個示例，加深一波理解。

首先是counter():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            counter-reset: child-number; /* 看這 */
            box-sizing: border-box;
            border: 1px solid black;
            padding: 10px;
        }
        .child{
            counter-reset: grandson-number; /* 看這 */
            box-sizing: border-box;
            border: 1px solid blue;
            margin: 5px;
        }
        .child:before{
            content: counter(child-number); /* 看這 */
            counter-increment: child-number; /* 看這 */
        }
        .grandSon{
            box-sizing: border-box;
            border: 1px solid red;
            margin: 5px;
        }
        .grandSon:before{
            content: counter(grandson-number); /* 看這 */
            counter-increment: grandson-number; /* 看這 */
        }
    </style>
</head>
<body>
    <div class="parent">父親 <!-- 容器 -->
        <div class="child">兒子</div>
        <div class="child">兒子</div>
        <div class="child">兒子</div>
        <div class="child">兒子 <!-- 巢狀容器 -->
            <div class="grandSon">孫子</div>
            <div class="grandSon">孫子</div>
            <div class="grandSon">孫子</div>
        </div>
    </div>
</body>
</html>

上面的例子是一個巢狀的帶索引的列表，我們使用了兩個counter-reset定義了兩個容器，來表示巢狀，當然我們也可以使用counters()簡化這個操作。

再看看counters():

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .container {
                counter-reset: box-number; /* 看這 */
                box-sizing: border-box;
                border: 1px solid black;
                padding: 10px;
                margin: 5px;
            }
            .box:before {
                content: counters(box-number, '.'); /* 看這 */
                counter-increment: box-number; /* 看這 */
            }
            .box {
                box-sizing: border-box;
                border: 1px solid red;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container">容器
            <div class="box">內容</div>
            <div class="box">內容</div>
            <div class="box">內容</div>
            <div class="box">內容
                <div class="container">容器
                    <div class="box">內容</div>
                    <div class="box">內容</div>
                    <div class="box">內容</div>
                </div>
            </div>
        </div>
    </body>
</html>

conters()的會搜尋所有的容器，然後將命名計數器收集、拼接然後展示。

上面兩個demo的區別可自行觀察，如果有問題，歡迎評論區一起討論交流.

結束是一個新的開始

這就是本次主題的全部內容，日後會堅持至少每週一更的頻率，歡迎志同道合朋友一起討論、交流。
最後，如果本文對你有幫助，希望得到你的支援。

一個很實用的css技巧簡析

我是小雨小雨，專注於更新有趣、實用內容的小夥，如果內容對大家有一點幫助，那麼就請動動手指，給個關注、點贊支援一下吧。 ^ - ^ 序言前兩天接到一個需求，其中包括一個有序的列表，我們今天就來看看這個有序怎麼做更方便、簡單。當然，這個功能很簡單：可以手動寫死... 可以迴圈插入dom，用索引做字首。

CSS一些很實用的技巧。

1.background-color:rgba 相信三基色大家都知道 rgb分別代表紅，綠，藍 a呢代表透明度取值在0~1之間 0代表全透明 1代表全不透明這是background的新屬性，在配合qq截圖來取色簡直是絕配我們可以輕而易舉的拿到rbg 這是我們只要在將對應的rgb

我想配置一個很實用而且酷酷的vim

首先，先上一張未經配置過的vim：這是一張未經配置過，即原始安裝的7.4版本vim。開啟檔案之後如下圖：一、開始我配置vim的第一步——顯示行號&語法高亮&設定空格縮排具體步驟 sudo切換到root使用者。（root下的配置.vimrc檔案會對所有

[教程技巧] 簡析Swift和C的互動

轉自貓·仁波切的部落格（微博）其中 @asmname 的兩個用法源於我的猜測驗證，用到了 Xcode, lldb, nm, llvm ir 等工具或格式。其中 name mangling 部分源自 WWDC。相關的分析主要基於我 dump 出的 Swift 標準庫宣告程

實用css技巧——清除浮動方法總結

相信不少跟我一樣的前端新手在利用float浮動來進行頁面的佈局和定位時都會遇到這樣的問題：一旦當前浮動元素的父級div不設定固定的高度height時，浮動的元素無法將父級div的內容撐開。導致整個頁面

C# TableLayoutPanel 一個很實用的案例

在這裡主要講tableLayoutPanel的一個最重要的用法，先看效果這個看的有點不明白，我換個案例你就明白直接上程式碼: Form1裡拖個TableLayoutPane

翻了翻element-ui原始碼，發現一個很實用的指令clickoutside

## 前言指令(`directive`)在 `vue` 開發中是一項很實用的功能，指令可以繫結到某一元素或元件，使功能的顆粒度更精細。今天在翻 `element-ui` 的原始碼時，發現一個還挺實用的工具指令，跟大夥分享一下。 ## clickoutside 的使用及效果該指令的原始碼在 `src/

8、CentOS7 安裝Docker之擴充套件（將docker程序移動到一個不同的分割槽）注：操作雖然很簡單，但很實用。

將docker程序移動到一個不同的分割槽 Docker把與你的容器和映象相關的資料儲存到一個目錄下。由於可能會儲存潛在的大量不同的映象，這個目錄會很快變得很大！如果你的主機有不同的分割槽，你可能會更快遇到空間受限的問題。在這種情況下，你可能需要把Docker的資料目錄移動到其它分割槽。問

5個大作用的Excel技巧，都很實用

平時在職場辦公中，我們總是少不了用Excel表格來完成資料的統計，至於我們該怎樣高效的去使用了？這當然是有簡單快捷的小技巧啦，那就是用以下五個Excel技巧去做，不想加班的朋友們，趕緊來學習一下。 1.插入批註【Shift+F2】有時在我們檢視資料時，有的

一個簡單實用的Android除錯應用技巧

在應用開發中，我們常常會進行日誌列印或者debug除錯，以此來分析執行時的一些資訊，便於發現bug和問題。Android Studio的Debug功能很好用，但是有時候有些情況下，就顯得不是那麼快捷和便利。比如我們除錯的點在應用一開啟的時候，很靠前，例如Appli

瀏覽器相容性問題——IE不支援卻很實用的CSS屬性(一)

1. Outline（適用範圍：滑鼠懸浮hover加外邊框）我們在佈局的時候，常常會因為新增邊框border影響寬高的佈局。那麼，outline是完美的替代品，因為它可以在不影響文件流的情況下呈現該物件。但是IE6 和IE7 不支援 outline 屬性。所以，它不能在這兩個瀏覽器中用於除錯。

瀏覽器相容性問題瀏覽器相容性問題——IE不支援卻很實用的CSS屬性(一)

瀏覽器相容性問題——IE不支援卻很實用的CSS屬性(一) 1. Outline（適用範圍：滑鼠懸浮hover加外邊框）我們在佈局的時候，常常會因為新增邊框border影響寬高的佈局。那麼，outline是完美的替代品，因為它可以在不影響文件流的情況下呈現該

一個很好，很實用，學習android xml佈局檔案

用了各種佈局組合成一個漂亮的見面。新手很實用的一個例子，大家學習一下。。。。。。分享本例用到了（相對佈局，線性佈局的各種巢狀使用）效果圖片： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout

一些css實用小技巧

1.CSS變數實現滑鼠移上效果 html <button class="btn"> <span>這個效果很不錯</span> </button> js let btn = documen

超讚！幫你打造極簡風APP UI 的實用設計技巧

隨著使用者對UI的喜好開始偏向簡約，設計師有必要將整個UI簡化剝離至基本狀態，因為保留關鍵元素才是成功的鑰匙。從某種意義上說，極簡主義的設計是形式和功能的完美結合。它最大的優勢在於形式上的清晰直觀——簡潔的線條，大量的留白，優雅簡約的圖形元素，賦予整個設計以簡約乾淨的感受

年輕人一定要知道的71個做飯技巧（很實用噢）+

年輕人一定要知道的71個做飯技巧（很實用噢） 1、煮水餃時，在水裡放一顆大蔥或在水開後加點鹽，再放餃子，餃子味道鮮美不粘連；在和麵時，每500克麵粉加拌一個雞蛋，餃子皮挺刮不粘連 2、燉肉時，在鍋里加上幾塊桔皮，可除異味和油膩並增加湯的鮮味 3、煮骨頭湯時加一小匙醋，可使骨頭中的磷、鈣溶解於湯中，並可儲存湯中

一個超實用的eclipse內容輔助技巧

一、簡介分享一個小技巧，內容輔助可以提高寫程式碼的效率和準確性，這樣設定讓編碼效率提升30%。二、設定步驟 1、開啟步驟：視窗–>首選項–>Java–>編

PHP開發環境簡析

安裝桌面 nbsp pmp 總結 ubunt bsp 虛擬機 xshell 單工作機情況 windows + wamp windows + XShell類終端工具 + linux虛擬機 Ubuntu桌面版自帶終端 Mac OS + mamp Mac OS 自帶終端 M

URL鏈接中的utm_source,utm_medium簡析

mono running -i 支持用戶 ica ase 分析 ng- 工作中須要分析一些鏈接，統計分析一些信息。比方例如以下的鏈接： http://lightapplication.xxxx.com/?utm_source=ucweb&utm_medium=

php實用小技巧【持續更新】

匹配一個 png 實用合並如果更新 1-1 字符串這是本人開始做項目的時候遇到過的問題還有解決方法 1.eval函數　　能把字符串轉換成可執行的php代碼，如果字符串不是可執行的php代碼的話，需要在前面加上@，屏蔽notice 2.array_merge函數

一個很實用的css技巧簡析

序言

原理與介紹

以碼為兵，馳馬試劍

首先是counter():

再看看counters():

結束是一個新的開始

相關推薦