决定如何为H1，H2，H3等创建CSS的难题 [英] Dilemma in deciding how to create CSS for H1, H2, H3 etc

问题描述

我目前在我的网站上有一些通用的H1，H2，H3样式，这些样式非常适合大多数我需要一个简单的传统"标题的通用"标题.

I currently have some general purpose H1, H2, H3 styles for my site which work great for most 'general' headings where I need a simple 'traditional' header.

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

我还创建了一些类似这样的组件，也就是说，我需要特定于该特定控件类型的标头.

I am also creating some components where I have something like this, thats to say I need a header specific to that particular type of control.

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

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

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

The problem I'm encountering is that the h1 under titledimage is also an h1 as defined earlier so it inherits all the styles defined by h1. This is generally undesired - I just want red and 1px solid blue for the header in the .titledImage div.

我正在阅读并尝试回答

I was reading and trying to answer this question about H1 styles. My conclusion is that if you are doing specific header styles (.titledimage h1) you cant really do generic header styles (h1) unless :

 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菜单控件的样式，他们实际上使用了 H6 ，我想知道他们是否正在这样做以避免这种冲突.

I've noticed that for styling the YUI menu control they actually use H6 and I'm wondering if they are doing that to avoid such conflicts.

我应该

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

理想情况下，我想这样说，但据我所知，没有这样的东西

ideally i want to say this, but theres no such thing (to my knowledge)

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

推荐答案

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