Uso del selector de 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>

 

Selector	ejemplo	Descripción de ejemplo	CSS
elemento + elemento	div + p	Seleccione todos los elementos p inmediatamente después del elemento div.	2
element1~element2	p ~ ul	Seleccione cada elemento <ul> que tenga un elemento <p> al frente.	3
[ atributo ~ = valor ]	[título ~ = flor]	Seleccione todos los elementos cuyo atributo de título contenga la palabra "flor".	2
[ atributo | = valor ]	[lang | = en]	Seleccione todos los elementos cuyo valor de atributo lang comience con "en".	2
[ atributo ^ = valor ]	a [src ^ = "https"]	Seleccione cada elemento <a> cuyo valor de atributo src comience con "https".	3
[ atributo $ = valor ]	a [src $ = ". pdf"]	Seleccione todos los elementos <a> cuyo atributo src termine en ".pdf".	3
[ atributo * = valor ]	a [src * = "abc"]	Seleccione cada elemento <a> cuyo atributo src contenga la subcadena "abc".	3
: lang ( idioma )	p: lang (eso)	Seleccione cada elemento <p> con un valor de atributo lang que comience con "it".	2
:primera letra	p: primera letra	Seleccione la primera letra de cada elemento <p>.	1
:primera linea	p: primera línea	Seleccione la primera línea de cada elemento <p>.	1
:primer hijo	p: primer hijo	Seleccione cada elemento <p> que pertenezca al primer elemento secundario del elemento principal.	2
:último niño	p: último hijo	Seleccione cada elemento <p> que pertenezca al último elemento secundario de su elemento principal.	3
:antes de	p: antes	Insertar contenido antes del contenido de cada elemento <p>	2
:después	p: después	Inserte contenido después del contenido de cada elemento <p>.	2
: primero de tipo	p: primero de tipo	Seleccione cada elemento <p> que pertenezca al primer elemento <p> de su elemento principal.	3
: último de tipo	p: último de tipo	Seleccione cada elemento <p> que pertenezca al último elemento <p> de su elemento principal.	3
: único de tipo	p: único de tipo	Seleccione cada elemento <p> que pertenezca al único elemento <p> de su elemento principal.	3
: enésimo hijo ( n )	p: enésimo hijo (2)	Seleccione cada elemento <p> que pertenezca al segundo elemento hijo de su elemento padre. n: número par impar	4
: enésimo último hijo ( n )	p: enésimo último hijo (2)	Igual que el anterior, contando desde el último elemento secundario.	3
: enésimo de tipo ( n )	p: enésimo de tipo (2)	Seleccione cada elemento <p> que pertenezca al segundo elemento <p> de su elemento padre.	3
:vacío	p: vacío	Seleccione todos los elementos <p> (incluidos los nodos de texto) que no tengan elementos secundarios. Nodo vacío: <p> </p>	3
:activado	entrada: habilitado	Seleccione cada elemento <input> habilitado.	3
:discapacitado	entrada: deshabilitado	Seleccione cada elemento <input> desactivado	3
:comprobado	entrada: comprobado	Seleccione cada elemento <input> seleccionado.	3
: no ( selector )	: no (p)	Seleccione cada elemento que no sea un elemento <p>.	3
::selección	::selección	Seleccione la parte del elemento seleccionada por el usuario.	3

 

Referencia detallada