css 伪类大全,CSS伪类

使用CSS计数器之前，必须重置一个值(如：todo)，默认是0。接着，每渲染一个

元素，todo计数+1。最后在.counter:after的content里显示计数结果。(注意：content只出现在html伪元素::before或是::after里)

section.to-dos {

counter-reset: todo; /* Set a counter named 'todo'*/

}

li.to-do {

counter-increment: todo; /* Increment 'todo' counter by 1 */

}

.counter:after {

content: counter(todo); /* Display the value of counter */

}

再稍微加工一下就可以实现如下功能了。请注意右上角的数字，这是利用CSS计数器动态生成的数值。

todo counter

:checked and :not(checked)

我在浏览器default actions这一期里提到过用radio做互斥按钮。

radio button

这里就用到了input radio的:checked伪类。那unchecked呢？没有这个伪类，但是可以用否定伪类，:not(checked)。

回忆一下上述互斥按钮的代码：

{{item}}

列表项

里的共享同一个name，形成互斥效果。点击后，内嵌的radio被置为:checked，其他radio自动变为:not(checked)。我们可以通过这个状态差异来让:checked的.selected兄弟可见，.unselected兄弟隐藏；反之，:not(checked)的.unselected兄弟可见，.selected兄弟隐藏。代码实现如下。是的，没有用到一点Javascript。

input[type="radio"]:checked ~ .selected {

display: block;

}

input[type="radio"]:checked ~ .unselected {

display: none;

}

input[type="radio"]:not(checked) ~ .unselected {

display: block;

}

input[type="radio"]:not(checked) ~ .selected {

display: none;

}

checked, unchecked, and indeterminate.

突然想到了一个很冷的知识：radio和checkbox一共有三种状态 checked、 unchecked和indeterminate。没错，还有一个中间态。checkbox三态如下所示。我记得早些年的QQ mail就利用过indeterminate制作过一个特殊效果。

three status

checkbox的indeterminate只能通过JS来设置

let checkbox = document.getElementById("checkbox")

checkbox.indeterminate = true;

radio的话，当所有同名radio都未被选择时，它们呈现的状态叫indeterminate。

总结

CSS伪类是一个很有趣知识点，很多人觉得这个伪类太过奇技淫巧，甚至有哗众取宠之嫌。其实CSS伪类，还有html的伪元素有许多实用的功能，熟练掌握可以极大地简化html、减少JS的绑定。你的页面也将更加简洁优雅。