CSS turing完成了吗? [英] Is CSS turing complete?

查看:342
本文介绍了CSS turing完成了吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

CSS不是,就我所知,图灵完成了。但我的CSS的知识是非常有限的。

CSS isn't, insofar as I know, Turing complete. But my knowledge of CSS is very limited.


  • CSS Turing是否完成?

  • 任何现有草稿或委员会考虑的语言特性

推荐答案

您可以将 CSS3中的规则110 ,因此只要您考虑了适当的附加HTML文件和用户交互强>成为CSS的执行的一部分。 很好的实现可用,此处包含另一个实现( JsFiddle version ):

You can encode Rule 110 in CSS3, so it's Turing-complete so long as you consider an appropriate accompanying HTML file and user interactions to be part of the "execution" of CSS. A pretty good implementation is available, and another implementation is included here (JsFiddle version):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Rule 110</title>
        <style type="text/css" media="screen">
            body {
                -webkit-animation: bugfix infinite 1s;
                font-family: "Courier New";
                font-size: 28px;
            }
            @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

            /* 111 110 101 100 011 010 001 000
0 1 1 0 1 1 1 0 */

            body > input {
                -webkit-appearance: none;
                display: block;
                float: left;
                border-right: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                padding: 5px 12px;
                margin: 0;
            }
            body > input::before {
                content: "0";
            }

            body > input:nth-of-type(-n+30) { border-top: 1px solid #ddd; }
            body > input:nth-of-type(30n+1) { border-left: 1px solid #ddd; clear: left; }

            body > input::before { content: "0"; }

            body > input:checked::before { content: "1"; }
            body > input:checked { background: #afa !important; }


            input:not(:checked) +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input::before {
                content: "1";
            }
            input:not(:checked) +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input {
                background: #fa0;
            }


            input:checked +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input::before {
                content: "1";
            }
            input:checked +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input {
                background: #fa0;
            }


            input:checked +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input::before {
                content: "1";
            }
            input:checked +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input {
                background: #fa0;
            }

            input:checked + input:checked + input:checked +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input::before {
                content: "0";
            }
            input:checked + input:checked + input:checked +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input {
                background: #fff;
            }

            input:not(:checked) + input:not(:checked) + input:not(:checked) +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input::before {
                content: "0";
            }
            input:not(:checked) + input:not(:checked) + input:not(:checked) +
                    *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
                    input {
                background: #fff;
            }

            body > input:nth-child(30n) { display: none !important; }
            body > input:nth-child(30n) + label { display: none !important; }

        </style>
    </head>

    <body>
        <input type="checkbox" />
        <input type="checkbox" />

        /* A total of 900 checkboxes required */

        <input type="checkbox" />
        <input type="checkbox" />

    </body>
</html>

这篇关于CSS turing完成了吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆