如何在CSS中只选择一个子元素?

时间:2014-02-23 23:27:33

标签: css

我正在尝试制作一个带有标题,第一段和第二段的方框。如何只选择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;
}

2 个答案:

答案 0 :(得分:1)

您正在寻找:last-child

引用the specification

  

:last-child伪类表示一个元素,它是某个其他元素的最后一个子元素。

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;
}

虽然公平,绝对的立场很少像评论中暗示的那样“方式”。像素中的固定大小在不同的屏幕尺寸和不同的缩放上不能很好地工作,更喜欢更合理的布局。有关原因,请参阅this question

答案 1 :(得分:0)

最后一个元素的CSS尝试使用:last-child

#info-box:last-child {
}

点击此处查看参考CSS选择器 http://www.w3schools.com/cssref/css_selectors.asp