css - 第一个，第二个和第三个元素单独使用仅 CSS

Question

我正在寻找一种仅针对给定元素的 1 个、仅 2 个和仅 3 个的方法-我知道有更好的方法，但是要查看是否可以轻松地以如此模糊的准确性定位选择器，这是一个更大的挑战只有CSS。

<div class="members-of">
    <h4 class="widget-title">Members of</h4>
    <ul>
        <li>
            <img src="image0.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image1.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image3.png" alt="">
        </li>
    </ul>
    <div class="clear"></div>
</div>

如果你只能使用 CSS，你将如何以最高效率解决它？

/* Member 1 */
.members-of ul img:first-child {}
/* Member 2 */
.members-of ul img:nth-of-type... {}
/* Member 3 */
.members-of ul img:eq(@_o) {}

Answer 1

您可以使用:nth-of-type（或:nth-child）应用于列表。在您的具体示例中，两个伪类都可以工作。

.members-of ul:nth-of-type(1) img {
  /* 1st image */
  border: 1px red solid;
}
.members-of ul:nth-of-type(2) img {
  /* 2nd image */
  border: 1px blue solid;
}
.members-of ul:nth-of-type(3) img {
  /* 3rd image */
  border: 1px yellowgreen solid;
}

<div class="members-of">
    <h4 class="widget-title">Members of</h4>
    <ul>
        <li>
            <img src="image0.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image1.png" alt="">
        </li>
    </ul>
    <ul>
        <li>
            <img src="image3.png" alt="">
        </li>
    </ul>
    <div class="clear"></div>
</div>

Answer 2

看看这个选择器：

/* First 3 span elements */
.members-of ul span:nth-of-type(-n+3) {
   width: 25px;
   height: 25px;
   background: red;
}

<div class="members-of">
    <h4 class="widget-title">Members of</h4>
    <ul>
        <li>
            <span>span 1</span>
        </li>
    </ul>
    <ul>
        <li>
            <span>span 2</span>
        </li>
    </ul>
    <ul>
        <li>
            <span>span 3</span>
        </li>
    </ul>
    <div class="clear"></div>
</div>

Answer 3

您可以使用 nth-of-type、nth-child、:first-of-type、:last-of-type css 选择器。

**.members-of ul img:eq(@_o) {} ** // eq 在这里不是有效的选择器，

用于 jQuery 选择器的 eq。

见下文

img{
  width: 50px;
  height: 50px;
  display: block;
}
.members-of ul:first-of-type li img{
  border: solid red;
}
.members-of ul:nth-of-type(2) li img{
  border: solid green;
}
.members-of ul:last-of-type li img{
  border: solid orange;
}

或者您可以与 nth-child 一起使用，但您还必须为此计算 h4 标签。

img{
  width: 50px;
  height: 50px;
  display: block;
}
.members-of ul:nth-child(2) li img{
  border: solid red;
}
.members-of ul:nth-child(3) li img{
  border: solid green;
}
.members-of ul:nth-child(4) li img{
  border: solid orange;
}

看到这里关于css选择器的完整想法

w3schools.com CSS 选择器