CSS - Ausrichtung auf mehrere Bilder in einem div

Ich bin versucht hinzuzufügen individuellen Rahmen für jedes Bild innerhalb eines div. Derzeit habe ich einen Rahmen um den gesamten Abschnitt, der hält, was die Fotos, aber ich versuche, das eigentliche Bild selbst.

Unten ist ein Beispiel der 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>

unten ist meine aktuelle 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 ist ein leeres Bild, dass ändert sich je eine zufällig generierte Nummer/Wahl. Ich möchte verhindern, dass der Rand rund um die Abschnitte, aber ich möchte auch die Rahmen um die Bilder selbst.

Danke für Eure Hilfe.

InformationsquelleAutor Warg | 2014-04-15
  1. 10

    Verwenden Sie dieses CSS:

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

    Den img wählt alle <img> tags.

    Erklärung:, Wenn Sie fügen Sie ein Leerzeichen zwischen Selektoren, es bedeutet "Nachkomme". Zum Beispiel mit diesem HTML-Code:

    <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>

    wenn Sie verwenden Sie diesen Selektor in CSS:

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

    wird sowohl die div mit text 1 und die div mit text 2 aber es wählt nicht die div mit text 3 da, dass div ist kein Nachfahre eines Elements mit der Klasse awesome.

    InformationsquelleAutor Sumner Evans
Schreibe einen Kommentar