CSS - ориентация на несколько изображений внутри div

0

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

Спасибо за помощь.

Теги:

1 ответ

9
Лучший ответ

Используйте этот 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.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню