Question

以下是代码：

当我在一个div属性上工作时，所有div都会生效，建议我一个答案

HTML

<div id="wrapper">
<div>
    <img src="images/logo.jpg">
</div>
<div>
<img src="images/logo.jpg">
</div>
<div>
<img src="images/logo.jpg">
</div>

CSS

 #wrapper {
width: 80%;
height: 300px;
margin-left: 250px;
margin-top: 30px;
}
#wrapper div {
background: #c0bebe;
display: inline-block;
width: 27%;
height: 80%;
margin-left: 10px;

}

Answer 1

执行此操作：#wrapper div

在CSS中表示：“将此CSS影响到具有div id的元素的所有wrapper子项。”

将CSS应用于所需div的一些解决方案：

选择第一个子元素

例如，如果您只想让第一个孩子获得CSS，您应该使用：#wrapper div:first-child

<强> W3SCHOOL

<强> MDN

选择一个精确的子元素

您可以确定所需的子元素：#wrapper div:nth-child(2)。获得第二个div。

W3SCHOOL

<强> MDN

使用CSS类（设置多个div）

您还可以在要设置样式的元素上使用类：

HTML：

<div id="wrapper">
    <div class="styledDiv">
        <img src="images/logo.jpg"/>
    </div>
    <div>
        <img src="images/logo.jpg"/>
    </div>
    <div class="styledDiv">
        <img src="images/logo.jpg"/>
    </div>
</div>

CSS：

.styledDiv {
    border: 5px solid red;
}

JSFIDDLE

使用CSS ID （必须是唯一的，因此要设置样式div）

HTML：

<div id="wrapper">
    <div>
        <img src="images/logo.jpg"/>
    </div>
    <div>
        <img src="images/logo.jpg"/>
    </div>
    <div id="myDiv">
        <img src="images/logo.jpg"/>
    </div>
</div>

CSS：

#myDiv {
    border: 5px solid red;
}

JSFIDDLE

如何只设计一个孩子div？

1 个答案: