CSS进阶篇——更多选择器 (selectors)

Posted 2022-10-03 老梁写代码

前面我们学习过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;