css - このcss構文は何ですか？

Question

これは何ですか？cssだと知っていますが、構文は何ですか？

#holder ul.sub li.sub-li a img {
    display:block;
    position:absolute;
    left:-9999px;
    border:0;
    height:200px;
    width:750px;
}

Answer 1

sub これは、idを持つdivにあるクラスを含むすべてのul要素を意味します holder

idを持つdivにあるクラスを持つすべてのliタグholder

アンカータグと画像はidのdivに存在していましたholder

Answer 2

#holder ul.sub li.sub-li a img {

これは、I'dホルダーを持つ要素内のul.sub内のli.sub-li内のnhors内のすべての画像を指定しています。

詳細については、こちらをご覧ください http://www.w3.org/TR/CSS2/selector.html

Answer 3

セレクターはDescendant コンビネーター を使用します。これは単純なセレクター間の空白文字のみです。

たとえば、要素の子孫である要素をa img指定します。つまり、要素内のどこかにありますが、それらの間に任意の数のレベルが存在する可能性があります。imga

次のコードの画像と一致します。

<a href="#">
  <img src="car.gif" />
</a>

次のコードの画像にも一致します。

<a href="#">
  <span>
    <span>
      <span>
        <img src="car.gif" />
      </span>
    </span>
  </span>
</a>

比較として、 でChild コンビネータを使用するとa > img、直接の子孫が指定されているため、最初の例の画像とのみ一致し、2 番目の例の画像とは一致しません。