異なるidの同じhtml要素をターゲットにする

Question

アーティクル> div>とdiv> divの場合とで、リストとそのアイテムのスタイルが異なるようにするにはどうすればよいですか？私は使用する必要がないようにしようとしています！重要です。私は記事でフォントサイズを大きくしようとしています...以下は、私が動作すると思ったコードです。

article#home-left ul.list-arrows { 
     margin:1.5rem 0 2rem 3rem; 
     font-size:4rem; 
    } 

    article ul.list-arrows { 
     margin:1.5rem 0 2rem 3rem; 
     font-size:4rem; 
    } 

<article> 
    <ul> 
     <li>Smaller font</li> 
    </ul> 

    <div id="home-left"> 
     <ul> 
     <li>Largerfont</li> 
     </ul> 
    </div> 

</article> 

Answer 1

あなたは非常に近くでした。

あなたの記事は#home-leftのIDを持っていない、IDはその記事の祖先に装着され、この

article#home-left ul li { 
    margin:1.5rem 0 2rem 3rem; 
    font-size:4rem; 
} 

はあり表示されません。この

article #home-left ul li { 
    margin:1.5rem 0 2rem 3rem; 
    font-size:4rem; 
} 

であるべきあなたのHTMLにはlist-arrowsのクラスになるので、私はそれを無視しました。

Answer 2

あなたはこれをやろうとしていますか？

HTML

<article> 
    <ul class="list-arrows"> 
     <li>Smaller font</li> 
    </ul> 

    <div id="home-left"> 
     <ul class='list-arrows'> 
     <li>Largerfont</li> 
     </ul> 
    </div> 

</article> 

CSS

#home-left ul.list-arrows { 
    margin:1.5rem 0 2rem 3rem; 
    font-size:4rem; 
} 

article ul.list-arrows { 
    margin:1.5rem 0 2rem 3rem; 
    font-size:2rem; 
} 

FIDDLE：https://jsfiddle.net/6yf8eno3/

Answer 3

これは動作するようです：

HTML

01あなた `ul`年代の

<article> 
    <ul> 
     <li class="list-arrows">Smaller font</li> 
    </ul> 

    <div id="home-left"> 
     <ul> 
      <li class="list-arrows">Largerfont</li> 
     </ul> 
    </div> 
</article> 

CSS

article ul .list-arrows { 
    margin:1.5rem 0 2rem 3rem; 
    font-size:2rem; 
} 

#home-left ul .list-arrows { 
    margin:1.5rem 0 2rem 3rem; 
    font-size:4rem; 
}