Question

我有一个像这样的html页面。我想知道是否可以应用这种风格＆＃39;底部：5.0rem＆＃39;只对下面父级的div标签，而不是p的父级的div标签？而且我想知道我是否可以做到这一点，而不是说'style = bottom：5.0rem;＆＃39;作为

的属性

<div class="section">
    <a href="..."> 
           <div id="first"> 
                <img/>
                <div>  <--- but not here
                    <p>  some text </p>
                </div/
            </div>
     </a> 
     <div id="first">
             <div>   <---- only to here
                <a> anchor </a>
             <div>
      </div>
</div>

我试过了：

.section div#first {
  bottom: 5.0rem;
}

但是这会将更改应用于两个DIV标记。

Answer 1

在您的特定方案中，您可以使用直接后代选择器

CSS

.section > div#first div {
    bottom: 5.0rem;
}

SASS

.section {
    > div#first {
        div {
           bottom: 5.0rem;
        }
    }
}

这意味着锚点内的div不会被定位，因为它不是该部分的直接后代。

Answer 2

首先，网页上的ID应为唯一。如果您需要多个，请使用一个类。完成后，您只需执行

即可

.section > .first > div {}

或使用＆符号

进行嵌套

.section {
    & > .first {
        & > div {}
    }
}

如何使用CSS在我的页面中指定div标签

2 个答案: