Question

我正在创建一个行业部分，就像在https://squareup.com

中看到的那样

我开始使用nth-of-type来调用css中的不同图像。 http://cssdeck.com/labs/full/vinttbws

但是，当它们不在同一个父母中时，它不起作用。我怎样才能让它发挥作用？

有没有另一种方法可以实现这一目标，而无需为每个行业制作一个带有图像的div类？

Answer 1

你是对的，nth-of-type不会工作，因为他们不会分享同一个直接的父母。

我强烈建议您按照自己的建议为每个人制作新课程。

你也可以给每个家长一个不同的id，然后你的css选择器只会要求孩子：

#restaurant > a {
  background-image:url(some/picture.jpg);
}

#retail > a {
  background-image:url(some/other/picture.jpg);
}

我在这里做了一些例子（用颜色代替图片）：http://jsfiddle.net/mo9yazjm/

编辑：我现在更改了CSSDeck示例：http://cssdeck.com/labs/t4xnpzgf

Answer 2

您可以使用为HTML标记添加不同的CSS类，或仅使用 CSS3 第n种选择器。
第一种方法更详细，因为您必须使用CSS一致地修改和更新标记。后者在一致性和维护方面是最好的，因为你只使用CSS。

标记上的CSS类

HTML

<div class="some-class"><a href="#">Restaurant</a></div>
<div class="other-class"><a href="#">Retail</a></div>
<div class="some-other-class"><a href="#">Gym</a></div>

CSS

.some-class a       {background-color: red;}
.other-class a      {background-color: gold;}
.some-other-class a {background-color: aqua;}

这是live example。

仅限CSS3

尝试使用nth-of-type CSS3 selectors将样式添加到div，然后将样式应用于锚点：

.col-md-4:nth-of-type(1) a {
  background-color: red;
 }

Here is the working link。我使用背景颜色，你可以使用背景图像，或者你的布局需要。

Answer 3

您可以在父级上使用nth-of-type（.col-md-4：nth-of-type（1）等）

Answer 4

：nth-of-type 适用于相同父级的子元素，而您将图片放在单独的 div 中。你会想要这样的东西：

     <div>
        <a></a>
        <a></a>
        <a></a>
     </div>

如何用CSS调用不同的图像

4 个答案:

标记上的CSS类

HTML

CSS

仅限CSS3