使用css偽類,實現同型別核取方塊計數的效果

2021-08-14 05:10:19 字數 553 閱讀 8854

最近發現乙個css的小技巧。在以往,當我想要獲取checkbox的資料數量的時候,常規的做法是使用js遍歷checkbox陣列,定義變數達到統計數量的效果。現在使用css完全可以實現相同的效果,簡單便捷,在不操作dom的情況下達到目的,嘻嘻

charset="utf-8">

偽類計數title>

type="text/css">

.box

input

:checked

.count

::before

style>

head>

class="box">

type="checkbox" />

label>

type="checkbox" />

label>

type="checkbox" />

label>

div>

class="count">計數p>

body>

html>

使用場景因人而異啊,第一次更新技術部落格,略微有點惶恐

如何使用 CSS3 偽類

在 這些新的 css3 偽類之前,先簡要回顧追溯一下這些在 web 應用中常常被誤解的 css 選擇器。在 1996 年,當 css1 的規範完成後,一些偽類選擇器已被囊括在內,其中許多你幾乎每天都在使用。例如 這些狀態都可以被應用到某個元素,通常是以 a 偽類名 css2 來了和 lang 新偽類...

如何用類實現不同型別之間的轉換?

include include using namespace std class cstudent cstudent void converttype 型別轉換函式 i 0 string name for i 0 i sizeof name sizeof string i if i sizeof ...

css 偽類與偽元素以及使用其清除浮動

在開發過程中經常用到偽類與偽元素清除浮動,今天就來梳理一下二者的關係與概念 先來看看官方的解釋 從w3c給的解釋可以看出偽類與偽元素概念上沒有區別,都是向css選擇器設定特殊效果。而二者的區別,舉個例子,使用偽元素 after清除浮動後,在頁面控制台的html 中會發現乙個 after元素,簡單來說...