1

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

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

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

因为这就是 SASS（一个 CSS 生成器）可以嵌套的方式...但是在一个 HTML 文档中，我们不能有两个id同名的 s，不是这样，所以上面的嵌套不起作用或赢了不好用。（尤其是如果需要 document.getElementById() 或 $('#caption') 或 $('caption') 来选择元素）。

我们可以用

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

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

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

#content_caption { color: teal }
  ...

#footer_caption { margin: 2em 1em }

?

4

4 回答 4

4

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

#content .caption { color: teal }
#footer .caption { margin: 2em 1em }
于 2010-06-14T20:20:02.923 回答
1

首先，像“caption”这样的东西听起来确实更像是一个类：

你说：这是 **the** 页脚（特定 id），但这是 **a** 标题（普通类）。

这是在 Sass 中嵌套选择器的另一种方法：

.caption
  margin: 2em 1em
  font-weight: bold
  #footer &
    background: teal
  #content &
    background: red

（“&”引用它所包含的任何内容。）

于 2010-06-20T10:42:40.740 回答
1

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

于 2010-06-14T20:19:27.747 回答
1

如果单页上没有两个id="caption"的元素，那就完全OK了。但是，我猜从命名（内容和页脚）来看，id = "caption" 的不止一个，这很糟糕。您应该记住id必须是唯一的！改用“类”，比如

#content .caption { }
#footer .caption { }
于 2010-06-14T20:23:00.687 回答