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：私は、それがある限り、それはレベル1の子であるとして、どのように深い母校を行うレベル1の下で任意の子である場合LEVEL4を変更したいcssで子クラスのみを変更するには？

.level1 .level4 { 
    width: 90px 
} 

.level4 { 
    width:50px 
}

。それが別のクラスのどこかにある限り、特定のクラスをどのように変更するのですか？それは可能ですか？

出典

2017-02-17 Justin

CSSルール '.level1 .level4'は動作していませんか？また、 'width 50px（コロンがありません） 'の入力ミスがあります。 – j08691

よろしくお願いいたします。私はちょうど例として速くそのコードを嘲笑した。他のコードは大きすぎて表示できません。また、私はそれがネストされたクラスの深さにある可能性があると言ったように。 – Justin

あなたは既にそれを持っているはずです。

.level1 .level4 { ... }は、class="level1"が親に表示された場合、class="level4"にのみ適用されます。 .level4は、常にclass="level4"に適用されます。

編集：あなたのCSSが間違った順序になっています。 CSSは順にwidth: 50を読み込み、width: 90を上書きします。あなたのhtmlに気づい

出典

2017-02-17 21:51:12

唯一の悪いことは、レベル8になる可能性があることです。私が言ったように、それは入れ子のクラスの深さにある可能性があります。 – Justin

https://plnkr.co/edit/ygyQ5BtELRFKjG5xDQrk?p=previewとは関係ありません。あなたの問題は、CSSを後方に読み込んでいることです。 –

CSSが順番に読み込まれるので、 'width：50;'は 'width：90px'よりも優先されます。ブラウザの要素を調べます。両方のスタイルが要素に適用されているのを見ることができますが、オーバーライドされているため、1つはクロスされています。 –

-1

あなたはこれが.level4と.level4の.level1壮大な親のdiv要素の親になり、別のdivに

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

を.level4を包みました。したがって、クラス.level1に.level4スタイルにすることは

.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で子クラスのみを変更するには？

答えて

関連する問題