css - 决定如何为 H1、H2、H3 等创建 CSS 的困境

Question

我目前的网站有一些通用的 H1、H2、H3 样式，这些样式非常适合我需要简单“传统”标题的大多数“通用”标题。

 h1 { /* lots of style attributes */ }
 h2 { /* lots of style attributes */ }
 h3 { /* lots of style attributes */ }

我还在创建一些组件，其中有类似的东西，也就是说我需要一个特定于该特定类型的控件的 header 。

 <div class="titledimage"><h1>Section header</h1><img .../></div>

 .titledimage h1 { color:red; bottom-border: 1px solid blue; }

我遇到的问题是，titledimage 下的 h1 也是前面定义的 h1，因此它继承了定义的所有样式通过h1。这通常是不需要的 - 我只想要 red 和 1px Solid blue 作为 .titledImage div 中的标题。

我正在阅读并试图回答 this question about H1 styles 。我的结论是，如果您正在执行特定的标题样式(.titledimage h1)，您实际上无法执行通用标题样式(h1)，除非:

 a) you reset every style attribute in the '.titledimage h1' style
 b) you just use a class name instead of h1
 c) your `h1` style is defined with very few attributes that you'd 
    be overriding anyway

我注意到，对于 YUI menu control 的样式他们实际上使用 H6，我想知道他们这样做是否是为了避免此类冲突。

我应该

a) be using <h6> like yahoo does?
b) reset every attribute defined by `h1` when I define `.titledimage h1` ?
c) just use a class name for `.titledimage header`, and leave 
   `h1`, `h2`, `h3` for 'traditional more logical headers' 
d) something else

理想情况下我想说这个，但没有这样的事情(据我所知)

 .titledimage h1 { inherit: none; color:red; bottom-border: 1px solid blue; }

Answer 1

对我来说，重置似乎很浪费。必须有一种干净的方法将 /* 很多样式属性 */ 应用于您想要应用的 h1 标签，而不是将其应用于 .titledimage 中的 h1。

假设你有:

<div class="top"><h1>PageName</h1></div>
<div class="leftNavigation"><h1>Cat1</h1><h1>Cat2</h1><h1>Cat3</h1></div>
<div class="rightMarginNote"><h1>Username</h1></div>
<div class="content">
 <h1>CONTENT</h1>
 <div class="titledimage">
  <h1>title</h1>
 </div>
</div>

那么你希望你的 CSS 有点像:

.top h1, .leftNavigation h1, .rightMarginNote h1, .content > h1 {
  /* lots of style attributes */
}
.similarly h2 { /* lots of style attributes */ }
.similarly h3 { /* lots of style attributes */ }
.titledimage h1 { color:red; bottom-border: 1px solid blue; }

代替替代方案

h1 { /* lots of style attributes */ }
h2 { /* lots of style attributes */ }
h3 { /* lots of style attributes */ }
.titledimage h1, .otherCase h1, .anotherCase h1, yetAnotherCase h1 {
  /* lots of style backtracking */
}
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
.otherCase h1 { color:blue; bottom-border: 1px solid blue; }
.anotherCase h1 { color:green; bottom-border: 1px solid blue; }
.yetAnotherCase h1 { color:mauve; bottom-border: 1px solid blue; }

还要将尽可能多的 H1-H5 内容组合在一起，如果您必须选择替代方案，请定义一个专门用于重置的类，该重置不应用于 h1，而是应用于任何类的包含 div。

<div class="titledimage hReset"><h1>title</h1></div>