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 |
example |
Example description |
CSS |
| element+element |
div+p |
Select all p elements immediately after the div element. |
2 |
| element1 ~ element2 |
p~ul |
Select each <ul> element that has a <p> element in front. |
3 |
| [attribute~=value] |
[title~=flower] |
Select all elements whose title attribute contains the word "flower". |
2 |
| [attribute|=value] |
[lang | = en] |
Select all elements whose lang attribute value starts with "en". |
2 |
| [attribute^=value] |
a[src^="https"] |
Select each <a> element whose src attribute value starts with "https". |
3 |
| [attribute$=value] |
a[src$=".pdf"] |
Select all <a> elements whose src attribute ends with ".pdf". |
3 |
| [attribute*=value] |
a[src*="abc"] |
Select each <a> element whose src attribute contains the "abc" substring. |
3 |
| :lang(language) |
p:lang(it) |
Select each <p> element with a lang attribute value starting with "it". |
2 |
| :first-letter |
p:first-letter |
Select the first letter of each <p> element. |
1 |
| :first-line |
p:first-line |
Select the first line of each <p> element. |
1 |
| :first-child |
p:first-child |
Select each <p> element that belongs to the first child element of the parent element. |
2 |
| :last-child |
p:last-child |
Select each <p> element that belongs to the last child element of its parent element. |
3 |
| :before |
p:before |
Insert content before the content of each <p> element |
2 |
| :after |
p:after |
Insert content after the content of each <p> element. |
2 |
| :first-of-type |
p:first-of-type |
Select each <p> element that belongs to the first <p> element of its parent element. |
3 |
| :last-of-type |
p:last-of-type |
Select each <p> element that belongs to the last <p> element of its parent element. |
3 |
| :only-of-type |
p:only-of-type |
Select each <p> element that belongs to the only <p> element of its parent element. |
3 |
| :nth-child(n) |
p:nth-child(2) |
Select each <p> element that belongs to the second child element of its parent element. n: odd even number |
4 |
| :nth-last-child(n) |
p:nth-last-child(2) |
Same as above, counting from the last child element. |
3 |
| :nth-of-type(n) |
p:nth-of-type(2) |
Select each <p> element that belongs to the second <p> element of its parent element. |
3 |
| :empty |
p:empty |
Select every <p> element (including text nodes) that has no child elements. Empty node: <p></p> |
3 |
| :enabled |
input:enabled |
Select each enabled <input> element. |
3 |
| :disabled |
input:disabled |
Select each disabled <input> element |
3 |
| :checked |
input:checked |
Select each selected <input> element. |
3 |
| :not(selector) |
:not(p) |
Select every element that is not a <p> element. |
3 |
| ::selection |
::selection |
Select the part of the element selected by the user. |
3 |
Detailed reference