CSS左边距应用于错误的类标题

Question

由于某些未知原因，当我向.basic-info h1添加margin-left时，它也适用于.bottomContent中的h1。 因此，bottomContent中的h1的余量也为80px。 意思是当我执行.bottomContent h1 {padding-left：80px}时，从理论上讲，这应该是唯一应用的方法，但并非如此，因此，padding-left在bottomContent中的h1上是doubeld。

作为一个简单的解决方案，我可以只删除bottomContent h1，然后将CSS保留为.basic-info，但显然我做错了。

HTML

div class = "basic-info">
    <div class ="image"> <img src = "logo.jpg" alt = "this is an image"> </div>
    <div class = "inside-info">
        <h1> Know better. Book better. Go better. </h1>

        <p>See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip
        See the latest reviews and compare the lowest hotel prices from 200+ hotel booking sites to help you make the most of your trip</p>
    </div>
    </div>

    <div class = "bottomContent">
        <h1> Top hotels: Recommendations </h1>
        <div class ="number-one">
            <img src = "smallimages.jpg" alt = "this is an image ">
            <img src = "smallimages.jpg" alt = "this is an image ">
            <img src = "smallimages.jpg" alt = "this is an image ">

        </div>

    </div>

CSS

.basic-info p,h1{
    margin-left:80px;
    width:50%;
}

.bottomContent h1{
        margin-left:80px;

    }

Answer 1

margin-left: 80px应用于.basic-info p和h1因为其中有逗号。 您需要执行以下操作才能使其正常工作...

.basic-info p, .basic-info h1 {
    margin-left:80px;
    width:50%;
}

Answer 2

我想您想给.inside-info h1留余量，而不是.bottomContent h1，这样您就可以给CSS这样。。. .basic-info .inside-info h1{ margin-left:80px; } .basic-info .inside-info h1{ margin-left:80px; }

这不适用于bottomContent中的h1。