0

我正在阅读的一个网站有一些看起来像这样的 CSS 定义：

#intro, #code { ... }
#intro { ... }
#code { ... }

我以前从未见过这种情况。两个问题：

  1. 在第一种情况下，它是否同时定义#intro并#code具有相同的初始定义？
  2. 后续的定义是对原始定义#intro的补充吗？#code
4

4 回答 4

2

直接问题的简单答案：

  1. 是的
  2. 是的

;-)

于 2012-12-27T08:26:05.693 回答
2

浏览器从上到下读取每一页代码。这意味着，后一个语句覆盖了前一个语句。

在您给出的示例中，这意味着首先#intro获得#code相同的 CSS，然后他们在各自的语句中收到一些额外的 CSS。这些单独的语句可以具有相同的属性（例如，width），但最后一个语句将始终是要使用的语句。

#intro, #code {width: 200px;}
#intro {width: 100px;} /* This value overwrites the previous */

一个例外是当一个语句比另一个语句更具体时。例如：

body #wrapper #intro, body #wrapper #intro #code {width: 200px;}
#intro {width: 100px;} /* This value is NOT as specific as or more specific than the previous, so it does NOT overwrite the previous value. */
于 2012-12-27T08:52:14.293 回答
1

是的。介绍和代码都获得相同的 css

#intro { ... }
#code { ... }

他们每个人都有不同的CSS

于 2012-12-27T08:26:50.157 回答
1 
#intro, #code { ... } /* selects and styles both */
#intro { ... } /* selects only #intro and styles it */
#code { ... } /* selects only #code and styles it */
#intro #code { ... } /* this means that #code is child of #intro. Selects #code and styles it! */

对于你的两个问题，答案是

是的

于 2012-12-27T08:31:21.743 回答