如何只用css更改子類？

-2

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>title</title> 
</head> 
<body> 
    <div class="level1"> 
     <div class="level2"> 
      <div class="level3"></div> 
      <div> 
       <div class="level4"></div> 
      </div> 
     </div> 
    </div> 
    <div class="level4"></div> 
</body> 
</html>

CSS：如何只用css更改子類？

.level1 .level4 { 
    width: 90px 
} 

.level4 { 
    width:50px 
}

我只希望更改級別4，如果它是任何一個孩子在1級母校做的是，只要是1級的孩子有多深。只要它在另一個類別下的某個地方，如何更改某個特定的類別？那可能嗎？

來源

2017-02-17 Justin

你是說你的CSS規則'.level1 .level4'不工作？你還有一個寬度爲50px的拼寫錯誤（缺少冒號）' – j08691

對不起。我只是以一個例子來快速嘲笑代碼。其他代碼太大而無法顯示。也正如我所說，它可以在任何深度的嵌套類。 – Justin

你應該已經擁有了。

.level1 .level4 { ... }將只適用於class="level4"當class="level1"出現在家長。只需.level4將始終適用於class="level4"。

編輯：沒有意識到它，但你的CSS是在錯誤的順序。 CSS的加載順序如此width: 50覆蓋width: 90。

來源

2017-02-17 21:51:12

唯一不好的是它可能是一個level8。就像我說的那樣，它可以在任何深度的嵌套類中使用。 – Justin

https://plnkr.co/edit/ygyQ5BtELRFKjG5xDQrk?p=preview並不重要。你的問題是你正在向後加載你的CSS。 –

CSS按順序加載，所以你的'width：50;'覆蓋了你的'width：90px'。檢查瀏覽器中的元素。您會看到兩種樣式都適用於您的元素，但其中一種已被覆蓋，因爲它已被覆蓋。 –

-1

注意到，在您的HTML你在另一個DIV

<div> 
    <div class="level4"></div> 
</div>

這使得.level4和.level4的.level1盛大母公司的股利父包裹.level4。因此樣式.level4類.level1將

.level1 div .level4 { 
    Width: 90px; 
}

或者你乾脆取出空的div和剛剛

<div class="level1"> 
    <!-- other diva--> 
    <div class="level4"></div> 
</div>

然後用

.level1 .level4 { 
    Your style 
}

或者你也可以只是樣式.level4如果你不在其他地方使用課程

希望你得到這個如何作品

來源

2017-02-17 21:57:48

如何只用css更改子類？

回答

相關問題