(1) #header{}

• 选择ID--header

(2).header{}

• 选择 class--header

（3) .header .logo{}

• 选择header下的logo元素

（4）.header.mobile{}

• 同一元素内有header和mobile两个class

（5）.header p, .header h3{}

• 选中匹配 header元素内的p标签,header元素内的h3标签

（6）#header a:hover{}

• 在ID：header内a标签匹配其鼠标悬停在a标签下的效果

（7）#header .logo~p{}

• 在ID：header内选中匹配 logo且为匹配 p的元素的下 N 个相邻元素

(8)#header .logo+p{}

• 在ID：header内选中匹配 logo 且为匹配 p 的元素的下一相邻元素

(9) #header .logo p{}

• 在ID：header内选中匹配 logo 且为匹配 p 的元素的后代元素。

(10) #header .logo>p{}

• 在ID：header 内选中匹配 logo 且为匹配 p 的元素的直接子元

(11) #header p.logo{}

• 在ID：header 内选择 p 标签下的 logo 元素

（12）#header .logo.p{}

• 在ID：header 内选择 logo 元素下的 p 标签

（13）#header input[checked]{}

• 在ID：header 内选择 input 标签内的 checked 元素