Question

我目前在我的网站上有一些通用的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; }

我遇到的问题是h1下的titledimage也是前面定义的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

对我而言，重置似乎很浪费。必须有一种干净的方式将/* lots of style attributes */应用于您希望它应用到的h1标记，而不是将其应用于h1中的.titledimage。

说你有：

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

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

Answer 2

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

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

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

另外，为了将样式嵌套在div中，我会这样做：

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

h1是一个块元素，无论如何都可以像div（边框，宽度等）一样设置样式。

Answer 3

b）重置由其定义的每个属性我定义h1时会.titledimage 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>

我认为更好的方法是在单独的类中定义重置

.hreset {
  /* Reset the header styles here */
}

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

<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，H2，H3等创建CSS的困境

3 个答案: