Question

这是我的代码，我坚持使用我无法更改或更改。

<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分配不同的位置。

我在考虑跨度：第一个孩子的路线，但我的CSS技能有限。

Answer 1

有多种方法可以实现这一目标。考虑到你写道你不能改变任何现有的html，最好的方法是使用子选择器。在我使用固定定位的示例中，如果您愿意，也可以使用相对。下面的示例代码，在我们为每个图像分配nth-child（ 1 ）的CSS中（该数字选择它将控制哪个子项）。

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

Answer 2

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

jsFiddle

进一步阅读：CSS Tricks - How nth-child Works

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

Css帮助需要设置<span> </span>的样式

3 个答案: