标签，同时不应用于.titledimage内的

Question

我目前在我的网站上有一些通用的H1、H2、H3样式，它们非常适用于我需要一个简单传统的标题的大多数通用标题。

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

我也正在创建一些组件，其中我有像这样的东西，也就是说，我需要一个特定于该特定类型控件的标题。 (Note: The translation may slightly vary depending on the context and intended meaning.)

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

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

我遇到的问题是titledimage下面的h1与之前定义的h1相同，因此它继承了h1中定义的所有样式。这通常是不希望的 - 我只想让.titledImage div中的标题具有红色和1px实线蓝色的样式。

我正在阅读并试图回答有关 H1 样式的这个问题。我的结论是，如果您正在进行特定的标题样式（.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菜单控件时，他们实际上使用了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

在我看来重置似乎是浪费的。必须有一种清洁的方法来将/*许多样式属性*/应用于您想要应用样式的

标签，同时不应用于.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内容分组在一起，如果需要使用替代方法，请定义一个类来专门重置应用于任何类的包含div，而不是h1。

<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) reset every attribute defined by h1 when I define .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>

标签，同时不应用于.titledimage内的

友情链接