如何使用CSS在我的頁面中指定div標籤

Question

我有一個這樣的html頁面。我想知道的是，是否可以將此樣式的'bottom：5.0rem'僅應用於以下父項的div標籤，而不適用於p父項的div標籤？我想知道如果我不把'style = bottom：5.0rem'做到這一點，''爲的

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

或嵌套