：李VS Liは、

Question

CSSでの出力に差がある理由 ：リー：https://www.w3schools.com/code/tryit.asp?filename=FM0HPU6L0R35ラン»VS Liは、：https://www.w3schools.com/code/tryit.asp?filename=FM0HQKZG79HR

Answer 1

最初のケースでは、スタイルがli要素内にあるすべての「a」タグに適用されているからです。第2のケースで

li a { 
     display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
} 

、スタイルはすべて「LI」要素にだけでなく、すべてに「」の要素に適用される：あなたが得る後者の場合には、簡単に言えば

li,a { 
     display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
} 

をパディングを倍にする：16pxからli + 16pxまで。ここで

はあなたが役立つかもしれないCSSセレクタ上のリンクのカップルです：

https://www.sitepoint.com/css-selectors/ https://www.w3schools.com/css/css_attribute_selectors.asp

は、この情報がお役に立てば幸い！

Answer 2

@Florinache

に追加する代わりに、我々は以下のようにカンマで個々のセレクタを分離することにより、一つのルールのプロパティにすべてのこれらのスタイルを組み合わせることができます2つの別々のCSSセレクタの書き込み：あなたのリンクで

li,a { 
     display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
} 

をリストを以下のコードに置き換えてください。違いがわかります。

<ul> 
    <li>Home</li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
</ul>