Question

我正在浏览的网站有一些看起来像这样的CSS定义：

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

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

在第一种情况下，它是用{定义#intro和#code来定义的相同的初始定义？
#intro和#code的后续定义是否与原始内容相加？

Answer 1

直接问题的简单答案：

是
是

- ）

Answer 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. */

Answer 3

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

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

他们每个人都有不同的CSS

Answer 4

#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! */

并且你的两个问题的答案都是

这些CSS定义意味着什么？

4 个答案:

是