匹配确切的结构

Question

这是代码

<div id = "content">
  <div id = "text">
    <h1>Text</h1>
  </div>
</div>

我是新手，我会知道是否有可能使用css，我只能将样式应用于这些div中的h1元素，而没有任何其他h1可以感觉到风格。

Answer 1

是的，你可以：

div#content > div#text > h1 { some style here }

在这种情况下，您只会触摸h1，它就像您描述的那样位于层次结构中。

Answer 2

是。这是一个例子。

div#content div#text h1 {/* your style */}

这将允许您仅按此特定顺序向这些项添加css。

Answer 3

无需在div或#content之前加入#text，因为每个id只能使用一次。如果您改为使用class，则可能需要在div之前添加div.content，以防其他代码也使用class。

#text > h1 {/* Styles */}

虽然您应该使用此功能，但如果您使用class代替：

div.content > div.text > h1 {/* Styles */}

这将匹配：

但不是：

匹配任何结构

#text h1 {/* Styles */}

虽然您应该使用此功能，但如果您使用class代替：

div.content div.text h1 {/* Styles */}

这将匹配：