多页h6标题在一个页面上的不同样式

-2

在一页上以不同方式设置多个h6标题的正确方法是什么？我想以下：多页h6标题在一个页面上的不同样式

CSS：

.content{ width:660px; overflow:hidden; } 

.content h6{ margin:25px 20px 0px 35px; 
      font-size:32px; 
      padding-bottom:5px; 
      font-family: 'Arial', sans-serif; 
} 

.blue { 
    color:#60817a; 
    border-bottom:2px solid #99bcb4; 
    text-shadow: 1px 1px 1px #99BCB4; 
} 

.black { 
     color:#000000; 
     border-bottom:2px solid #333333; 
     text-shadow: 1px 1px 1px #333333; 
    }

HTML：

<div class="content"> 
<h6 class="blue">Subtitle</h6> 

<div class="content"> 
<h6 class="black">Subtitle</h6>

来源

2012-02-04 Martijn

看起来像它会对我有用。你认为这些问题是什么？ – 2012-02-04 15:01:31

无论你为什么工作 - 但在同一个网页上有不同的标题样式，例如通过http://csslint.net/。 – egasimus 2012-02-04 15:03:20

@ Brian＆ngen Thx，我不认为在标题中增加额外的类是正确的。 – Martijn 2012-02-04 15:05:55

几件事情：

对于选择优先于其他选择器，你需要考虑它的specificity。根据该链接中列出的规则，您的.blue选择器不会与.content h6选择器一样具体（尝试将color: red添加到content h6选择器;其他规则将优先如此）。改为尝试制作第二个选择器.content .blue。
blue是一个不好的名字，对于类和ID是语义的，你应该选择一个描述它的名称，而不是它看起来像什么（即当你改变你的CSS并且决定它应该是红色时，看起来有点愚蠢）。

来源

2012-02-04 15:04:32 cmbuckley

多页h6标题在一个页面上的不同样式

回答

相关问题