在CSS中，"#footer #caption“可以和"#content #caption”共存吗？

Question

我打算像这样“嵌套”CSS id。

#content #caption { color: teal }
  ...

#footer #caption { margin: 2em 1em }

因为这是SASS (一个CSS生成器)可以做嵌套的方式…但是在一个超文本标记语言文档中，我们不能有两个同名的id，不是吗，所以上面的嵌套不能工作或者不能很好地工作。(特别是如果需要标题()或$(‘#document.getElementById’)或$('caption')来选择元素)。

我们可以使用

#content #content_caption { color: teal }
  ...

#footer #footer_caption { margin: 2em 1em }

但是为什么还要多一层嵌套呢？为什么不干脆

#content_caption { color: teal }
  ...

#footer_caption { margin: 2em 1em }

Answer 1

单词"caption“将指示它不是唯一标识符。如果是这样，我会将标题声明为一个类。以下将是完全合法和有效的：

#content .caption { color: teal }
#footer .caption { margin: 2em 1em }

Answer 2

没有理由这么做。id是一个非常繁重的选择器，它应该足以改变样式规则。如果不是，则在前面附加#content，或者更改获胜规则的选择器。

Answer 3

如果在单个页面上没有两个标题为“id=”的元素，则完全可以。但是，从命名(content & footer)来看，我猜有不止一个id = "caption“的文件，这是非常糟糕的。您应该记住，类id必须是唯一的！使用“”代替，如

#content .caption { }
#footer .caption { }