在可计算理论中,当一组数据操作的规则(一组指令集,编程语言,或者元胞自动机)满足任意数据按照一定的顺序可以计算出结果,被称为图灵完备。
CSS作为一门写样式的语言,其实也能够满足上述概念,例如纯CSS完成井字棋判断:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0; padding:0;} input{height:50px; width:50px;} label{display:block;} p:after{content: "no connected";} /*从左到右*/ input:checked + input:checked + input:checked ~ p:after, /*从上到下*/ input:checked+*+*+*+input:checked+*+*+*+input:checked ~ p:after, /*左上到右下*/ input:checked+*+*+*+*+input:checked+*+*+*+*+input:checked ~ p:after, /*右上到左下*/ input:checked+*+*+input:checked+*+*+input:checked ~ p:after{content: "connected";} </style> </head> <body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <label></label> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <label></label> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <label></label> <p>result: </p> </body> </html>
input:checked
表示一个复选框被选中,因此如果符合input:checked + input:checked + input:checked
则说明某行的三个复选框都被选中。
利用该特性,从上到下可以表示为:input:checked+*+*+*+input:checked+*+*+*+input:checked
;
左上到右下:input:checked+*+*+*+*+input:checked+*+*+*+*+input:checked
;
右上到左下:input:checked+*+*+input:checked+*+*+input:checked
;
最后再通过~
选择器选择后方的p
标签,修改:after
的content
属性显示结果即可完成。
本月太忙没时间写,只能拿N年前的小例子出来炒炒冷饭。深入了解可以参考这篇文章。