Question

我是CSS的新手..我想知道为什么添加div会导致样式发生变化!!

这是我的HTML

<div class="companies_body">
        @foreach($companies as $company)
        <img src="img/{{$company->image}}" alt="" class="comp_img">
        <div class="company_description">
        {{($company->description)}}
        </div>
        @endforeach

    </div>

这是图像样式

.companies_body .comp_img{
    height: 30%;
    float: left;
    margin-top: 3%;
    margin-left: 8px;
    margin-right: 5px;

}

这里图像高度仅限于其原始高度和工作的30％..但是通过修改HTML就像那样

<div class="companies_body">
            @foreach($companies as $company)
            <div class="test">
            <img src="img/{{$company->image}}" alt="" class="comp_img">
            <div class="company_description">
            {{($company->description)}}
            </div>
            </div>
            @endforeach

        </div>

img的样式消失!!

Answer 1

您之前的代码中发生的事情是，company_body的子代是直接comp_img ...所以当您访问它时，您可以像下面这样说： .companies_body .comp_img //你做的是什么。

现在，你添加一个div测试，所以.comp_img是.test的子节点，而后者又是.companies_body的子节点，因此img css消失了。

希望这有帮助。

CSS样式在添加div时消失了

1 个答案: