重温CSS系列（四）

　高级选择器

CSS 2.1和CSS 3有其他许多有用的选择器。不过，虽然大多数现代浏览器支持这些高级选择器，但是IE 6和更低版本不支持。好在在创建CSS时考虑到了向后兼容性。如果浏览器不理解某个选择器，那么它会忽略整个规则。因此，可以在现代浏览器中应用样式和易用性方面的改进，同时不必担心它在老式浏览器中造成问题。但是要记住，在对于站点功能或布局很重要的任何元素上，都应该避免使用这些高级选择器。

子选择器和相邻同胞选择器

第一个高级选择器是子选择器。后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。在下面的示例中，外层列表中的列表项显示一个定制的图标，而嵌套列表中的列表项不受影响（见图2-1）：

#nav>li {
  background: url(folder.png) no-repeat left top;
  padding-left: 20px;
}

<ul id="nav">
  <li><a href="/home/">Home</a></li>
  <li><a href="/services/">Services</a>
     <ul>
       <li><a href="/services/design/">Design</a></li>
       <li><a href="/services/development/">Development</a></li>
       <li><a href="/services/consultancy/">Consultancy</a></li>
     </ul>
  </li>
  <li><a href="/contact/">Contact Us</a></li>
</ul>

在IE 6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应用你希望子元素具有的样式。然后，使用通用选择器覆盖子元素的后代上的样式。所以，要实现与前面的子选择器示例相同的效果，可以这样做：IE 7和更高版本都支持子选择器。但是，在IE 7中有一个小bug，如果父元素和子元素之间有HTML注释，就会出问题。

#nav li {
background: url(folder.png) no-repeat left top;
  badding-left: 20px;
}

#nav li * {
  background-image: none;
  padding-left: 0;
}

有时，你可能需要根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落显示为粗体、灰色，并且字号比后续段落略微大一点儿（见图2-2）。

h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}
<h2>Peru Celebrates Guinea Pig festival</h2>
  <p>The guinea pig festival in Peru is a one day event to celebrate
these cute local animals. The festival included a fashion show where
animals are dressed up in various amusing costumes.</p>
  <p>Guinea pigs can be fried, roasted, or served in a casserole. Around
65 million guinea pigs are eaten in Peru each year.</p>

与子选择器一样，如果在目标元素之间有注释，这在IE 7中也会出问题。