Question

在一个页面上以不同方式设置多个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>

Answer 1

有几件事：

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

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

1 个答案: