CSSセレクターの使用法

li::marker{color:#ddd}
li:not(:first-child):not(:last-child):not(.third):not(#fouth){color:salmon}
ol+ol{margin-top:0}
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a[href]:after{content:" (" attr(href) ")"}
abbr[title]:after,.abbr[title]:after{content:" (" attr(title) ")"}
li:first-child{font-size:20px}

    <a href="http://www.baidu.com">首页</a><br>
    缩写：<abbr title="People's Republic of China">PRC</abbr><br>
    abbreviation:<span class="abbr" title="People's Republic of China">PRC</span>
    <ol>
        <li>11111</li>
        <li>22222</li>
        <li class="third">33333</li>
        <li id="fouth">44444</li>
        <li id="fifth">55555</li>
        <li>66666</li>
    </ol>
    <ol>
        <li class="item-1">11111</li>
        <li class="item-2">22222</li>
        <li class="item-3">33333</li>
        <li class="item-4">44444</li>
        <li class="item-5">55555</li>
        <li class="item-6">66666</li>
    </ol>
    <ol>
        <li class="item">11111</li>
        <li class="item">22222</li>
        <li class="item">33333</li>
        <li class="item">44444</li>
        <li class="item">55555</li>
        <li class="item">66666</li>
    </ol>

セレクタ	例	説明例	CSS
要素+要素	div + p	div要素の直後にあるすべてのp要素を選択します。	2
要素1〜要素2	プル	前に<p>要素がある各<ul>要素を選択します。	3
[属性〜=値]	[title〜 =花]	title属性に「flower」という単語が含まれているすべての要素を選択します。	2
[属性\| =値]	[lang \| = en]	lang属性値が「en」で始まるすべての要素を選択します。	2
[属性^ =値]	a [src ^ = "https"]	src属性値が「https」で始まる各<a>要素を選択します。	3
[属性$ =値]	a [src $ = "。pdf"]	src属性が「.pdf」で終わるすべての<a>要素を選択します。	3
[属性* =値]	a [src * = "abc"]	src属性に「abc」部分文字列が含まれている各<a>要素を選択します。	3
：lang（言語）	p：lang（it）	「it」で始まるlang属性値を持つ各<p>要素を選択します。	2
：最初の文字	p：最初の文字	各<p>要素の最初の文字を選択します。	1
：最初の行	p：最初の行	各<p>要素の最初の行を選択します。	1
：第一子	p：最初の子	親要素の最初の子要素に属する各<p>要素を選択します。	2
：最後の子	p：最後の子	親要素の最後の子要素に属する各<p>要素を選択します。	3
：前	p：前	各<p>要素のコンテンツの前にコンテンツを挿入します	2
：後	p：後	各<p>要素のコンテンツの後にコンテンツを挿入します。	2
：最初のタイプ	p：最初のタイプ	親要素の最初の<p>要素に属する各<p>要素を選択します。	3
：最後のタイプ	p：last-of-type	親要素の最後の<p>要素に属する各<p>要素を選択します。	3
：唯一のタイプ	p：唯一のタイプ	親要素の唯一の<p>要素に属する各<p>要素を選択します。	3
：nth-child（n）	p：nth-child（2）	親要素の2番目の子要素に属する各<p>要素を選択します。n：奇数偶数	4
：nth-last-child（n）	p：nth-last-child（2）	上記と同じですが、最後の子要素から数えます。	3
：nth-of-type（n）	p：nth-of-type（2）	親要素の2番目の<p>要素に属する各<p>要素を選択します。	3
：空の	p：空	子要素を持たないすべての<p>要素（テキストノードを含む）を選択します。空のノード：<p> </ p>	3
：enabled	input：enabled	有効な各<input>要素を選択します。	3
：無効	入力：無効	無効になっている<input>要素をそれぞれ選択します	3
：チェック済み	入力：チェック済み	選択した各<input>要素を選択します。	3
：not（セレクター）	：not（p）	<p>要素ではないすべての要素を選択します。	3
：：選択	：：選択	ユーザーが選択した要素の部分を選択します。	3

詳細リファレンス

おすすめ