css图灵完备

最新推荐文章于 2023-06-09 10:52:57 发布

特雷比西亚国王

最新推荐文章于 2023-06-09 10:52:57 发布

阅读量915

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/tlbxygw/article/details/52457617

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器需支持css3

对格子点击，格子的内容会在点和圈之间切换
如果有任意三个格子内容是圈，下方p标签的内容为connected
如果没有三个格子内容是圈，下方p标签的内容为not_connected

<!DOCTYPE html>
<html lang="en">
<head>
   
    <title>css-connect-three</title>
    <style>
        body {
            -webkit-animation: bugfix infinite 1s;
            margin: 0.5em 1em;
        }
        @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

        input {
            -webkit-appearance: none;
            display: block;
            float: left;
            border-right: 2px solid #ddd;
            border-bottom: 2px solid #ddd;
            padding: 0px 8px;
            margin: 0;
            font-family: Consolas, "Courier New", monospace;
            font-size: 30pt;
        }

        input:nth-of-type(-n+7) {
            border-top: 2px solid #ddd;
        }

        input:nth-of-type(7n+1) {
            border-left: 2px solid #ddd;
        }

        input:before {
            content: "·";
        }

        input:checked:before {
            content: "○";
        }

        label {
            display: none;
            display: block;
            clear: both;
        }

        p {
            clear: both;
        }

        p:after {
            content: "not_connected";
        }
		
        /*这下面是你要提交的CSS*/
        /*input:checked ~ input:checked ~ input:checked ~ p:after {
            content: "connected";
        }*/
		
		/*横*/
		input:checked+input:checked+input:checked ~ p:after {
            content: "connected";
        }
		/*竖*/
		input:checked+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+input:checked ~ p:after {
            content: "connected";
        }
		/*右斜*/		
		input:checked+*+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+*+input:checked ~ p:after {
            content: "connected";
        }		
		input:checked+*+*+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+*+*+input:checked ~ input:checked ~ p:after {
            content: "not_connected";
        }		
		/*左斜*/
		input:checked+*+*+*+*+*+*+input:checked+*+*+*+*+*+*+input:checked ~ p:after {
            content: "connected";
        }
        /*这上面是你要提交的CSS*/
    </style>

</head>
<body>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><label></label>
<p></p>
</body>
</html>

特雷比西亚国王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css图灵完备

浏览器需支持css3对格子点击，格子的内容会在点和圈之间切换如果有任意三个格子内容是圈，下方p标签的内容为connected如果没有三个格子内容是圈，下方p标签的内容为not_connected css-connect-three body { -webkit-animation:
复制链接

扫一扫

专栏目录