css - 如何在CSS中只选择一个子元素？

Question

我正在尝试制作一个带有标题、第一段和第二段的框。我如何才能只选择 CSS 中的最后一段以便将其向下移动，使其不与第一段重叠？这是我的代码:

#info-box > p {
    line-height: 1.3em;
    font-size: 17px;
    font-family: Arial;
    text-align: center;
    color: #979797;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    position: absolute;
}

#info-box:nth-child(2) {
    line-height: 1.3em;
    font-size: 17px;
    font-family: Arial;
    text-align: center;
    color: #979797;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 100px;
    position: absolute;
}

Answer 1

您正在寻找 :last-child

引用 the specification :

The :last-child pseudo-class represents an element that is the last child of some other element.

Here's an example :

div {
    width:100px;
    height:100px;
    background-color:red;
    border:solid;
    margin:2px;
    display:inline-block;
    border-width:1px;
}
div:last-child{
    background-color:white;
}

尽管公平地说，绝对位置很少像 Nit 在评论中暗示的那样“方式”。以像素为单位的固定大小在不同的屏幕尺寸和不同的缩放比例下效果不佳，更喜欢更合理的布局。参见 this question为什么。