Справка по Css, необходимая для создания стиля

#css

Вопрос:

Это мой код, с которым я застрял, и я не могу его изменить или изменить.

 <p>
    <span class="small">
        <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
        <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
        <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
        <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
        <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
    </span>
    <em></em>
</p>

Как мне оформить каждого отдельного star.gif таким образом, я могу назначить различную позицию для каждого gif-файла.

Я думал о маршруте span:first-child, но мои навыки css ограничены.

1. Дайте каждому изображению класс. Так, например, вы бы добавили class="class1" к первому изображению тег, затем добавили class="class2" и так далее. Затем оформите их в своей таблице стилей.

Ответ №1:

Для этого существует несколько способов. Учитывая, что вы написали, что вы не можете изменить ни один из существующих html, лучшим способом было бы использовать дочерний селектор. В примере я использовал фиксированное позиционирование, однако вы также можете использовать относительное, если хотите. Пример кода ниже, в CSS мы присваиваем n-й дочерний элемент (1) каждому изображению (число определяет, каким дочерним элементом оно будет управлять).

 <html>
<head>
    <style type="text/css">
        .small img:nth-child(1) {
            position:fixed;
            top:20px;
            left:220px;
        }
        .small img:nth-child(2) {
            position:fixed;
            top:20px;
            left:50px;
        }
        .small img:nth-child(3) {
            position:fixed;
            top:40px;
            left:20px;
        }
        .small img:nth-child(4) {
            position:fixed;
            top:120px;
            left:50px;
        }
        .small img:nth-child(5) {
            position:fixed;
            top:50px;
            left:70px;
        }
    </style>
</head>
<body>
    <p>
        <span class="small">
            <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
            <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
            <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
            <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
            <img border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
        </span>
        <em></em>
    </p>
</body>

Ответ №2:

 .small img:nth-child(4) {
  // selects the 4th image
}

jsFiddle

Дальнейшее чтение: приемы CSS — как работает n-й дочерний элемент

Ответ №3:

Это очень просто, просто сделайте:

 <p>
<span class="small">
<img style = "CSS HERE" border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img style = "CSS HERE" border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img style = "CSS HERE" border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img style = "CSS HERE" border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
<img style = "CSS HERE" border="0" alt="star" src="http://islandthrills.com/jomres/images/star.gif">
</span>
<em></em>
</p>