Question

我们正在使用display：inline-block;控制可能存在于课堂内部的元素＆＃34; test＆＃34;。 javascript现在出现在页面上。我不知道＆＃34;脚本＆＃34;标签可能会呈现给页面。有没有人找到一种方法来处理这个示例代码，而不是命中＆＃34; style＆＃34;等元素。和＆＃34;脚本＆＃34;？

我们愿意使用display：none;在我们的脚本和样式标签上，但这是一个kludge。

<html>
<head>
    <style type="text/css">
        .test * {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="test">
        <p>Text here</p>    
        <script type="text/javascript">
            function TestFunction() {
                var test = 1;
            };
        </script>
    </div>
</body>
</html>

输出结果为：

这里的文字函数TestFunction（）{var test = 1; };

Answer 1

最简单的方法是更改.test * {}选择器。

另一种方法是用以下方式推广风格：

script,style{
   display:none !important;
}

Here is a fiddle

Answer 2

您可以使用display: none;覆盖它，也可以使用:not()选择器，如下所示：

.test *:not(script) {
    display: inline-block;
}

或者，最好的选择可能是将您的脚本标记放在</body>标记内或者应该放在哪里。

Answer 3

就像你之前评论的那样，＆＃34;我们愿意使用display：none;在我们的脚本和样式标签上，但这是一个kludge。＆＃34; 您正在设置标签以使其溢出 .test * {display: inline-block}

你可以做的几件事。

从该div中取出标签
不要在CSS中使用*选择器
在css .test script {display: none;}

出现在页面上的Javascript＆＃34; inline-block n＃34; css继承

3 个答案: