$（ '親>子> childOfChild> ...'）。cssの（ '背景色'、 '赤）

Question

HTML

<div class="galao"> 
    <div class="informacoesGalao invisible"> 
     <div class="tabelaInformacoes infoGalao" style="float:right; text-align:right"> 
     <p class="nomeGalao">Produto A</p> 
     <p class="invisible volumeTotalGalao">1000</p> 
     <p class="invisible volumeAtualGalao">800</p> 
     </div> 
    </div> 
    <div class="desenhoGalao"> 
     <div class="bordasGalao"> 
     <div class="conteudoGalao"></div> 
     </div> 
    </div> 
</div> 

CSS

.conteudoGalao { background-color: blue }

<div class="galao">を選択し、子の背景色を変更しようとしています<div class="conteudoGalao">。

ユーザーが<div class="galao">にクリックすると、このdivは<div id="selectedGalao" class="galao">に変わります。

私はすでに$('#selectedGalao > conteudoGalao').css('background-color','red')を試しましたが、エラーや何も返さない場合もあります。どのように私はこの仕事をすることができますか？このような "孫のdiv"の特定のjqueryはありますか？

Answer 1

jQueryでエラーが発生しました。次のことを試してみてください。

$('#selectedGalao .conteudoGalao').css('background-color','red') 

あなたは.が欠落していたとしてconteudoGalaoがクラスだったので、.を追加することによってこれを行うことを指定していなかった、jQueryの要素を探していた>があるconteudoGalao

と呼ばれます直接子供の場合はconteudoGalaoではありません。

Answer 2

'>' cssセレクタは、直接的な子供のためのものです。 conteudoGalaoは孫であるため動作しません。それが十分に具体的でない場合を除き、単に$('#selectedGalao .conteudoGalao').css('background-color','red')を使用してください。この場合、理由についてさらに詳しい情報が必要になります。あなたのマークアップがどのように機能するのか、あなたのセレクタではっきりとしたいと思うのは、$('#selectedGalao > .desenhoGalao > .bordasGalao > .conteudoGalao').css('background-color','red')です。最後に、CalvTが言ったように、「conteudoGalao」の前にも、クラスとしてラベル付けする期間がありません。