决定如何为H1、H2、H3等创建CSS时遇到的难题

我目前有一些通用的H1，H2，H3风格为我的网站，这对大多数'一般'的标题，我需要一个简单的'传统'标题伟大的工作

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

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

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

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

我已经注意到，他们实际上使用的是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

---

简单的解决方案是不嵌套h1标记，即：

<div class="different-header-style">Some Header</div>

如果h1没有您想要的样式，那么为什么要使用它

此外，与仅仅为了风格而将其嵌套在div中相比，我会这样做：

<h1 class="special-header">Some Header</h1>

h1是一个块元素，您可以像div边框、宽度等一样设置样式

b重置由定义的每个属性 h1当我定义。标题图像h1

这种方法的问题是，不能对具有特定样式的其他标题重用重置样式，例如

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

然后，您可以在必要时重新使用这些重置，例如

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

---

在我看来，重置似乎是浪费。必须有一种干净的方法将/*许多样式属性*/应用于您希望应用它的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>

而不是替代方案

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内容组合在一起，如果必须使用alernative，请定义一个专门用于重置的类，该类不是应用于H1，而是应用于任何类的包含div

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

---

@丹尼尔：完成了。它在我想发布之前就发布了，但我不确定复制是如何发生的。你能发布HTML的一般结构吗？我不认为在大多数情况下有很多H1是非常有用的。@strager-你看到问题503925了吗？你是说什么-h2；-？我倾向于雅虎如何处理他们的东西。如果它是合法的标题，它至少应该是H。我需要在这几天安装一个屏幕阅读器，看看它的可访问性如何works@Simon，通常，标题应该能够创建目录。Opera:View->Style->ToC并不是一个很好的例子，但维基百科就是一个很好的例子。看看雅虎的主页，我想你会得到新版本。他们有标题为“今日热门搜索”的面板。这些就是我所说的。这些可能是很好的候选表格contents@cletus-我喜欢书的简洁。它在逻辑上仍然是一个标题，我仍然想称它为一个标题。我所联系的问题的答案也同意这是一种良好的做法。我确实想知道，但这也有点笨重-但可能是最好的解决办法here@don-看起来有点毛茸茸的，但我喜欢你的BBC猫头鹰图标：-带我回去…你可以把hreset类放在div上：.HRESETH1{/*reset*/}

<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>

.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; }

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