Question

我试图为div中的每个图像添加单独的边框。目前我在整个部分都有一个边框，用于存放照片，但我试图获取实际图像本身。

以下是html

的示例

<div id="options">
 <img id="rock" src="rock.jpg" name="rock" width="265" height="250" />

 <img id="paper" src="paper.jpg" name="paper" width="265" height="250" />
 <img id="scissors" src="scissors.jpg" name="scissors" width="265" height="250" />
 <img id="lizard" src="lizard.jpg" name="lizard" width="265" height="250" />
 <img id="spock" src="spock.jpg" alt="spock" width="265" height="250" />

<div id="compPick">
 <img id="blank" src="blankpic.jpg" name="blank" width="265" height="250" />
</div>
 //div below ends the option div
</div>

下面是我目前的css

 #options{
text-align: center; 
border: 2px solid #333333;
background-color: #D0CECE;
display: block;
 }

 #compPick{
text-align: center; 
border: 2px solid #333333;
padding: 5px;
 }

compPick是一张空白图片，根据随机生成的数字/选项而变化。我想保留各个部分的边框，但我也希望图像周围的边框。

感谢您的帮助。

Answer 1

使用此CSS：

#options img {
    border: 2px solid #333333;
}

img选择所有<img>代码。

说明：在选择器之间添加空格时，表示“后代”。例如，使用此HTML：

<div class="awesome">
    <div class="foo">
        <div class="bar">text 1</div>
    </div>
    <div class="bar">text 2</div>
</div>

<div class="bar">text 3</div>

如果你在CSS中使用这个选择器：

.awesome .bar { /* styles here */ }

它会同时选择div text 1和div text 2，但不选择div text 3 div不是具有类awesome的元素的后代。

CSS-在div中定位多个图像

1 个答案: