Question

假设我们有一个HTML页面，其结构为

<html>
<body>
    <table id="myTable">
    </table>
</body>
</html>

现在我将CSS定义为;

#myTable {width:100%;width:900px;}

现在我的问题是这个表间接受视口（或可用的浏览器空间）的影响那么2个值（px或％）中的哪一个会赢？这是表格在布局中实际占用多少空间？如果当前浏览器空间是1000px，那么它是否需要该值（这意味着100％覆盖900 px值）在更广泛的层面上，我们可以推广这个工作，％或px值总是赢吗？这取决于设置的DOCTYPE吗？

请帮帮我。揍你。

Answer 1

那么2个值（px或％）会赢得多少？

像素宽度会赢，但不是因为它是用像素单位定义的。

由于这两个规则出现在同一个规则集中，因此它们的选择器具有相同的特异性（因为它们是相同的），所以最后一个规则获胜。

单位的选择无关紧要。

Answer 2

px将赢得它将使用900px而不是100％的宽度我不知道原因但我已经测试了它

Answer 3

px将赢得背后的原因，即px中的最后一个值。每当检测到css文件时，都会从上到下检查它，并在最后一个中找到它。例如

我们有

#home {width:100%;color:#fffccc;}

然后在底部再次定义

#home {width:100%;color:red;}

id为home的元素的字体颜色为红色。

Answer 4

在CSS中，除非前一个具有！important。

，否则总是最后定义的样式获胜

例如

.myClass{
    width: 200px;
    width: 400px;
}

在这种情况下，宽度将是400px，因为它是解析CSS时最后出现的规则。

.myClass{
    width: 200px !important;
    width: 400px;
}

在这种情况下，宽度将为200px，因为规则是重要

我有两个宽度声明。哪一个会被应用？

4 个答案: