Я пытаюсь добавить отдельные границы к каждому изображению внутри 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
- это пустое изображение, которое изменяется в зависимости от произвольно сгенерированного числа/выбора. Я хотел бы сохранить границу вокруг разделов, но мне также понравилась граница вокруг самих изображений.
Спасибо за помощь.
Используйте этот 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
.