A

plate

#id

#fancy

A B

plate apple

#id A

#fancy pickle

.classname

.small

A.className

orange.small

#id.className

#big.wide

A,B

both

plate,bento

*

all

A *

plate *

A+B

紧跟在盘子后的苹果

plate + apple

A~B

跟在盘子后面所有的泡菜

plate~bento

A>B 

plate>apple

plate orange:first-child

盘子里的第一个橘子

plate :only-child

<p>NBA players with most championships:</p>
<ul>
  <li>Bill Russell</li>
  <li>Sam Jones</li>
  <li>Tom Heinsohn</li>
  <li>K. C. Jones</li>
  <li>Satch Sanders</li>
  <li>John Havlicek</li>
  <li>Jim Loscutoff</li>
  <li>Frank Ramsey</li>
  <li>Robert Horry</li>
</ul>

p {
  font-weight: bold;
}

li:last-child {
  border: 2px solid orange;
}

 div p:nth-child(2) selects the second p in every div

plate:nth-child(3)

:nth-last-child(A)

 span:first-of-type selects the first <span> in any element.

div:nth-of-type(2) selects the second instance of a div.

.example:nth-of-type(odd) selects all odd instances of a the example class.

plate apple:only-of-type

div:last-of-type selects the last <div> in every element.

p span:last-of-type selects the last <span> in every <p>.

div:empty selects all empty <div> elements.

apple:not(.small)

nth-child和nth-of-type的区别_:nth-of-type(an+b)-CSDN博客

CSS Diner - Where we feast on CSS Selectors!