CSS- 如何在一个 div 中同时选中多张图片

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 是一张空白图片，根据随机生成的数字/选择而改变。我希望保留各个区块周围的边框，但同时也想让图像本身有边框。

感谢您的帮助。

- Warg

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 */ }

它将选择带有text 1和text 2的div，但不会选择带有text 3的div，因为该div不是具有类名为awesome的元素的后代。

- Sumner Evans

Answer 2

使用以下CSS：

.div img {
  margin: 0 1vmax;
  transition: all 0.5s;
}

img 选择所有的 <img> 标签。

解释：当你在选择器之间添加一个空格时，它的意思是“后代元素”。

- Nirajan Mahara