Question

我有几个标题，让我们说它看起来像这样：

<h1 class='headers'> first one </h1>
 <h2 class='headers'> second one </h2>
 <h3 class='headers'> third one </h3>
 <h4 class='headers'> fourth one </h4>

现在我想使用该类以不同方式设置它们。我的尝试看起来像这样：

.headers{
    font-size:4vh;
}
,headers h1{
    color:white;
}
.headers h2{
    color:red;
}
.headers h3{
    color:blue;
}
.headers h4{
    color:green;
}

它不起作用，这样做的正确方法是什么？

Answer 1

基本上，您需要在类之前放置HTML标记，您的代码旨在将标题标记定位到另一个元素的INSIDE，而不是元素本身。

另外，您使用逗号而不是句点标记了h1类选择器。

＆＃13;

.headers{
    font-size:4vh;
}
h1.headers{
    color:white;
}
h2.headers{
    color:red;
}
h3.headers{
    color:blue;
}
h4.headers{
    color:green;
}

＆＃13;

 <h1 class='headers'> first one </h1>
 <h2 class='headers'> second one </h2>
 <h3 class='headers'> third one </h3>
 <h4 class='headers'> fourth one </h4>

＆＃13;

Answer 2

你也可以这样做，这当然取决于你下一步将是什么

＆＃13;

body { background: #ccc }

.headers * {
    font-size:4vh;
}
.headers h1 {
    color:white;
}
.headers h2 {
    color:red;
}
.headers h3 {
    color:blue;
}
.headers h4 {
    color:green;
}

＆＃13;

<div class="headers">
     <h1> first one </h1>
     <h2> second one </h2>
     <h3> third one </h3>
     <h4> fourth one </h4>
</div>

＆＃13;

Answer 3

你需要写：

h1.headers {
}

代替。你写的内容将h1元素定位在.headers元素中。

Answer 4

你应该像这样选择它们：

h4.classname

设计一个类的不同元素

4 个答案: