.box{ ... } #menu{ ... } .header img{ ... }
这些样式名称前面加的“.”和“#”以及“空格”代表了不同的意义。
“.”代表选择类,可以理解为“选择这个页面中所有此类元素”,例如上面的“.box”就代表了页面中所有类名为“box”的元素都将应用此样式。
“#”代表选择ID,可以理解为“选择这个页面中ID为此值的元素”,例如上面的“#menu”就代表了页面中id为“menu”的元素都将应用此样式。
“空格”则代表选择子元素,可以理解为“选择这个元素中符合这个选择器的子元素”,例如上面的“.header img”就代表了选择所有在class为“header”的元素内的img元素。
通过选择类、选择ID以及选择子元素,大家可以很方便地对页面中的元素进行定位和样式调整。