cssセレクター（学習ノート）_html/css_WEB-ITnose

http://zachary-guo.iteye.com/blog/605116

1. div+p は、

要素の直後にあるすべての

要素を選択します。
説明: p、p.prev = div を検索します。

2. [class~=flower] title 属性に「flower」という単語が含まれる要素をすべて選択します。
説明: これは単語であることに注意してください class="abc xyz" abc は単語です

3. [lang|=en] lang 属性値が「en」で始まるすべての要素を選択します。
説明: いわゆる始まりでは区切り文字として - を使用する必要があることに注意してください。 class="en-yy" ok, class="en_yy" failed

4. [src^="https"]
説明: 属性 str https で始まり、これは httpsss と一致しますが、 |

5 のようには機能しません。 [src$=".pdf"]
説明: $ は ^ の逆であり、通常の場合と同様に理解できます。式

6. [src*=ggc]
説明: SQL の %ggc%

4.p:first-child は、ggc がある限り成功します。親要素の最初の子要素。
説明: elem には任意の親があり、elem は最初の子、elem は p です。3 つの条件が true でOKです。
注: これは p:nth-child(1) と同じです。
nth-of-type の違いと nth-of-child
この 2 つの違いを現実的に例えると、家族計画の国勢調査です。nth-of-child は、2 番目の子供で女の子の場合、罰金が課されることを意味します。 n番目の子供は、彼がどの子供であるかは関係ありません、二番目に生まれた女の子には罰金が科せられます。

nth-of-type(2n+1) アルゴリズム。n は 0,1,2... の各行を表します。2n+1 は 2*0+1、2*1+1、2*2+1 です。 ..一般的な掛け算と足し算で、答えを計算するたびに答えを点灯させます
5.p:nth-of-type(5)
説明: eq(4) 5 番目のものを選択します

6.p: nth-of-type(n+3) || p:nth-last-of-type(-n+3) 子を数えた後に
の説明もあります: >=3

7.p: nth-of -type(-n+3)
説明: <=3

8. p:nth-of-type(odd/even)
説明: 奇数、偶数

9.p:nth-of-type (3n+2)
解説:nは最初が0なので、1+2は実点として表現できます。2番目から拾うと、3*nは3の倍数なので、1として表現できます。 light for each 3 さて、文全体が 2 番目から始まり、3 つごとに 1 つが点灯します (開始点 2 も点灯します)

10。 of-type(-n+ 5)
説明: 3 ～ 5 (3 と 5 の両方のカウント) の間、原則は 2 回フィルターすることです

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。