Question

当他们在李里面时，我似乎无法改变我的div的背景。我认为问题与我的元素所处的顺序有关。

<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
</ul>

.featured-items li .inner:nth-of-type(1) {
    background-image: url(../images/phone.jpg);
}

.featured-items li .inner:nth-of-type(2) {
    background-image: url(../images/firelace.jpg);
}

目前，每个内部都显示"phone.jpg"。

Answer 1

应该像.featured-items li:nth-of-type(2)>div.inner

＆＃13;

.featured-items li:nth-of-type(1)>div.inner  {
    background-color: red;
}

.featured-items li:nth-of-type(2)>div.inner {
    background-color: yellow;
}

＆＃13;

<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div>v</div></li>
        <li><div class="inner"><div class="item-content"></div>f</div></li>
        <li><div class="inner"><div class="item-content"></div>vl</div></li>
</ul>

＆＃13;

Answer 2

您不希望.inner选择:nth-of-type()，而是li。即：＆＃34;选择第（n）个列表元素并将以下样式应用于其.inner子项。

＆＃13;

.featured-items li:nth-of-type(1) .inner {
    background-image: url(../images/phone.jpg);
}

.featured-items li:nth-of-type(2) .inner {
    background-image: url(../images/firelace.jpg);
}

＆＃13;

<ul class="featured-items">
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
        <li><div class="inner"><div class="item-content"></div></div></li>
</ul>

＆＃13;

Answer 3

试一试：

li {
	border:1px solid red;
}
.featured-items li:nth-of-type(1) > .inner{
    background-image:url(http://images.clipartpanda.com/flower-clip-art-4c9arqMcE.png);
    background-size:20px 20px;
}

.featured-items li:nth-of-type(2) > .inner {
    background-image:url(http://www.clker.com/cliparts/d/E/X/A/4/f/pink-daisy-md.png);
	 background-size:20px 20px;
}

<ul class="featured-items">
   <li>
      <div class="inner"><div class="item-content">1</div></div>
  </li>
 <li>
      <div class="inner"><div class="item-content">2</div></div>
  </li>
  <li>
    <div class="inner"><div class="item-content">3</div></div>
  </li>
</ul>

nth-of-type在列表中不起作用

3 个答案: