高级选择器
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中也会出问题。