前面我们学习过​​HTML 选择器​​，​​类选择器和 ID 选择器​​，这几种选择器配合起来使用可以让我们精确定位 HTML 元素。

本篇要介绍的几个功能更加强大。

全局选择器

全局选择器用一个星号（​​*​​）来表示，它会作用于所有元素。全局选择器除了可以为页面设置全局样式之外，还可以配合其他选择器一起使用。

* {
    margin: 0;
    padding: 0;
}

#contact * {
    display: block;
}
  • 单独使用全局选择性相当于重置了浏览器的默认样式
  • 跟在其他选择器后面使用，只会作用于该选择器的子元素

子选择器

大于号（​​>​​）用于指定一级子元素。

<ul id="genus_examples">
    <li>Cats
        <ul>
            <li>Panthera</li>
            <li>Felis</li>
            <li>Neofelis</li>
        </ul>
    </li>
    <li>Apes
        <ul>
            <li>Pongo</li>
            <li>Pan</li>
            <li>Homo</li>
        </ul>
    </li>
</ul>

如果要给​​<ul id="geneus_examples">​​​ 的一级子元素（​​<li>​​ 标签） “Cats” 和 “Apes” 设置样式，CSS 可以这样写：

#genus_examples > li { 
    border: 1px solid red; 
}

其他的 ​​<li>​​ 元素不会受到影响，因为子选择器只作用于一级子元素。

如果要作用于所有子元素，可以这么写：

#genus_examples  li { 
    border: 1px solid red;
}

邻接选择器

加号（​​+​​）表示邻接选择器，只作用于第一个邻近的节点。

<h1>Clouded leopards</h1>
<p>Clouded leopards are cats that belong to the genus Neofelis.</p>
<p>There are two extant species: Neofelis nebulosa and Neofelis diardi.</p>

下面的 CSS 只会让第一个 ​​<p>​​ 的字体变为粗体：

h1 + p { 
    font-weight: bold; 
}

如果要作用于所有的兄弟节点，可以使用 CSS3 新提供的兄弟选择器（​​~​​）：

h1 ~ p { 
    font-weight: bold; 
}