html - 如何在不添加修饰符类的情况下仅选择最后一个元素

Question

我只想选择类为“feature”的最后一个元素，而不添加额外的类，只能使用像 :last-child 这样的伪选择器，但由于类为“feature”的元素不是兄弟元素，所以它根本不起作用。有人可以帮我解决这个小问题吗？这是 HTML:

      <div class="row">
            <div class="col-sm-6 col-md-6 col-lg-4">
                <article class="feature">
                    <i class="fas fa-search-location fa-3x mb-3"></i>
                    <h3 class="heading-tertiary mb-5">Great location</h3>
                    <p class="feature__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
                        unde?
                    </p>
                </article>
            </div>
            <div class="col-sm-6 col-md-6 col-lg-4">
                <article class="feature">
                    <i class="fas fa-utensils fa-3x mb-3"></i>
                    <h3 class="heading-tertiary mb-5">Free meals</h3>
                    <p class="feature__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
                        unde?
                    </p>
                </article>
            </div>
            <div class="col-sm-12 col-lg-4">
                <article class="feature">
                    <i class="fas fa-dumbbell fa-3x mb-3"></i>
                    <h3 class="heading-tertiary mb-5">Fitness room</h3>
                    <p class="feature__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam illo nam quis sit
                        unde?
                    </p>
                </article>
            </div>
        </div>

Answer 1

:last-child 仅在相关元素是容器的最后一个子元素而不是特定类型元素的最后一个时才有效。为此，您需要:last-of-type

.col-lg-4:last-of-type article.feature {
  background-color:red
}