CSS选择器笔记

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

NBA players with most championships:

  
Bill Russell
  
Sam Jones
  
Tom Heinsohn
  
K. C. Jones
  
Satch Sanders
  
John Havlicek
  
Jim Loscutoff
  
Frank Ramsey
  
Robert Horry

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  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 

 in every element.

p span:last-of-type selects the last  in every 

.

div:empty selects all empty 

 elements.

apple:not(.small)

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

CSS Diner - Where we feast on CSS Selectors!