如何设置只有一个子 div 的样式？ [关闭]答案

【问题标题】：How to style only one child div? [closed]如何设置只有一个子 div 的样式？ [关闭]
【发布时间】：2014-07-11 17:57:28
【问题描述】：

代码如下：

当我处理一个 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;

}

【问题讨论】：

是的，这就是 CSS 的工作原理。 #wrapper div 将针对元素 #wrapper 内的所有 div。见code.tutsplus.com/tutorials/…
给 div 一个类或 id 和样式
为每个 div 添加不同的class。

标签： html css

【解决方案1】：

这样做：#wrapper div

在 CSS 中的意思是：“将此 CSS 影响到具有 wrapper id 的元素的所有 div 子元素。”

将 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

【讨论】：