CSS如何引用多个div中的最后一个div

标签 css

我有以下 HTML:

<div class="test">
        <div class="inner">
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">
                    </div>
                </div>
            </div>
        </div>
    </div>

我怎样才能使用 CSS 仅引用最后一个 spec__test div?

最佳答案

使用 :last-child

参见:参见:http://www.w3schools.com/cssref/sel_last-child.asp

.pure-g .pure-u-1-4:last-child .spec__test{
  background-color:red;  
}
<div class="test">
        <div class="inner">
            <div class="pure-g">
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
                <div class="pure-u-1-4">
                    <div class="spec__test">123
                    </div>
                </div>
            </div>
        </div>
    </div>

关于CSS如何引用多个div中的最后一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32627515/

相关文章:

html - 如何在有序的 HTML 列表中为罗马数字加下划线

javascript - 拖放功能在触摸设备中不起作用?

php - 识别 div 覆盖之外的窗口的 HTTP_REFERER 屏幕分辨率

html - CSS - 父 div 不充当父级

html - Bootstrap 4.1 悬停时的下拉子菜单

html - Bootstrap 3 导航没有药丸

jquery - 如何使导航栏不重叠内容? Navbar-static-top 有效,但不能固定滚动

javascript - 如何从 'Slick slider syncing' 中删除 slider 导航并改为显示缩略图?

javascript - 使用 AngularJS 在悬停时上下滑动框

javascript - jQuery 修复了在滚动时缩小到较小尺寸的导航栏是 super 马车