html - 某些选择器的 CSS 选择器样式排除

Question

我有

<table id="exclude1"><tr><td id="exclude2" height="100%" width="100%">

    <div>123</div><table>......</table> etc

</td></tr></table>

和CSS样式

<style>
#exclude1, #exclude2 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative;}
* {border:1px solid red; background:red; width:100px; etc.....}
</style>

问题是，当我为“*”选择器设置“display:block”或“display:inline”是 css 时，此样式也适用于排除的选择器。 当我为“排除”选择器设置“display:block”或“table”或“table-cell”或其他任何内容时，这两个元素变得不同(对齐、大小等被破坏)。

我该怎么做才能使“*”选择器样式不影响#exclude1 和#exclude2？

更新:

我将#exclude1、#exclude2 分开为:

#exclude1 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative; display:table;}
#exclude2 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative; display:table-cell; vertical-align:middle;}

至少目前看来一切正常。 谢谢。

Answer 1

将 * 放在#Exclude1、#Exclude2 之前。 这就是 CSS 的工作原理，它们是级联样式表。

而且，如果所有其他方法都失败了，像这样在您的属性之后抛出 !important:

• 边框:无!重要；