CSS-Klasse IMG-innen div und span

Hi am Anfang habe ich code wie diesen:

<div class="123_test" tabindex="0" role="button">

    <span class="">
        <img class="" alt="" src="picturetopic"></img>        
    </span>
</div>

Wie kann ich diese Art img mit 123_test Klasse?

  • Du meinst wie .123_test > img{ style of the image } ?
  • img ist nicht direkt absteigen von div.123_test. Sollte es nicht div.123_test>span>img ??
InformationsquelleAutor Paweł Domański | 2013-10-14
  1. 17

    Zunächst nicht starten können einen Klassennamen mit einer Ziffer, gehe ich davon aus, dass es die Erzeugung von irgendwo wie die Klassen leer sind, aber wenn Sie können, als sollten Sie es, wie

    class="name_123_test"

    Und verwenden Sie den selector unten wie

    .name_123_test > span img {
   /* Styles goes here */
}

    In der CSS-Bezeichner (inklusive Elementnamen, Klassen und IDs in
    Selektoren) kann enthalten nur die Zeichen [a-zA-Z0-9] und ISO 10646
    Zeichen U+geschützte Leerzeichen 00A0 und höher, plus einen Bindestrich (-) und Unterstrich
    (_); Sie können nicht starten mit einer Ziffer, zwei Bindestriche, oder einem Bindestrich gefolgt
    von einer Ziffer. Bezeichner können auch enthalten Escape-Zeichen enthält und alle
    ISO 10646-Zeichen als numerischer code (siehe Nächster Punkt). Zum Beispiel,
    der Bezeichner "B&W?" kann geschrieben werden als "B\&W -\?" oder "B\26 W\3F".

    W3C Referenz

    InformationsquelleAutor Mr. Alien
  2. 3

    Warum sind Ihre class Attribute leer?

    Wenn Sie sich bewerben möchten den 123_test Klasse der img - tag, fügen Sie es einfach in die class Attribut:

    <img class="123_test" alt="" src="picturetopic"></img>

    Oder meinst du, dass Sie verwenden möchten die Vorfahren div als ein style-guide für die img? In der CSS, können Sie die Referenz - img als Nachkomme der 123_test Klasse:

    .123_test img
{
    //css rules
}

    Den Raum zwischen den beiden IDS bedeutet, dass der letztere ist ein Nachkomme der ehemaligen.

    • Ich Stimme zu, wenn Sie können geben Sie einen Klassennamen zu, das Bild selbst, das wäre gut. Dein zweites Beispiel würde gerecht zu Szenarien, in denen die Bilder werden dynamisch generiert, von 3rd-party - & wenn der Verbraucher nicht die Fähigkeit haben, geben Sie den css-Klassennamen
    InformationsquelleAutor David
  3. 0

    Können Sie nicht name einer Klasse beginnt mit einer Zahl. So ändern Sie Ihre Klasse Namen class="test_123" oder etwas, das nicht mit einer Zahl beginnen.

    Und jetzt können Sie Stil Ihre img-auf diese Weise:

    .test_123 //here you put your class name after the "."
{
    //style your image here
}
    InformationsquelleAutor Roman
  4. 0

    Zusätzlich, verwenden Sie besser das HTML-markup für die Funktionalität:

    <button type="button" class="test_123" tabindex="0">    
    <span>
        <img alt="" src="picturetopic" />       
    </span>
</button>

    Tasten type="button" enthalten kann text oder ein Bild. Wenn das Bild text enthält, wäre es besser, den Einsatz von css zum erstellen der grafischen Effekt für die Einhaltung w/Richtlinien zur Barrierefreiheit und Darstellung über mehrere Geräte hinweg.

    InformationsquelleAutor Roralee
Schreibe einen Kommentar