跳到主要内容位置

CSS 组合运算符

CSS 提供了一组运算符,用于选择与特定元素有特殊位置关系的元素,例如选择子元素、直接子元素、相邻节点和直接相邻节点,接下来看一下每种运算符的作用。

选择子元素#

子元素运算符用一个空格表示,空格前边指定要选择哪个元素的子元素,空格后面指定要选择的子元素,空格前后可以是任意类型的选择器,例如标签选择器、class 选择器、ID 选择器、属性选择器等。来看一个例子,代码如下:

<style>  div span {    color: red;  }</style><div>  <p>这个是一个<span>段落</span></p>  <span>一些文字</span>  <div>    <div>      <span>测试文字</span>    </div>  </div></div>

预览:

div span 会选择 div 元素下的所有 span 元素,无论 span 嵌套了多少层,只要在 div 元素的下级,都会选中。

选择直接子元素#

选择直接子元素使用大于号, >,它与选择子元素不同的是,只选择指定元素的、满足条件的第一级子元素,例如上边的例子使用 > 只会选择 <span>一些文字</span><span>测试文字</span>,因为只有它们两个在 <div> 的第一级,不过 <span>测试文字</span> 是在其它 <div> 元素中,我们这里使用了标签选择器,所以 > 前边选择的是所有的 div 元素,代码如下:

<style>  div > span {    color: red;  }</style><div>  <p>这个是一个<span>段落</span></p>  <span>一些文字</span>  <div>    <div>      <span>测试文字</span>    </div>  </div></div>

预览:

选择相邻节点#

选择相邻节点使用波浪号,esc 下面的按键,~,它会选择指定元素后面,所有同级的、满足条件的元素,示例代码如下:

<style>  .paragraph ~ span {    color: red;  }</style><div>  <p class="paragraph">这个是一个<span>段落</span></p>  <span>一些文字</span>  <span>测试文字</span></div>

预览:

我们这里使用了 class 选择器选择了 p 元素,后面使用 ~ 选择它后面所有的 span 元素,把它们的文字颜色改成了红色。

选择直接相邻节点#

直接相邻节点与相邻节点运算符的关系,和子元素与直接子元素运算符的关系类似,使用 + 运算符,它会选择指定元素后面、满足条件的、紧邻的元素,示例代码如下:

<style>  .paragraph + span {    color: red;  }</style><div>  <p class="paragraph">这个是一个<span>段落</span></p>  <span>一些文字</span>  <span>测试文字</span></div>

预览:

可以看到只有 p 后面紧邻的 span 元素被选择了,再后面的 span 没有选择上。

多次使用组合运算符#

组合运算符可以使用多次,那么就会按顺序选择满足条件的元素,直到最后一个选择器,如果有满足的条件的元素,就会进行选择,例如下方代码所示:

<style>  div > div > span {    color: red;  }</style><div>  <p>这个是一个<span>段落</span></p>  <span>一些文字</span>  <div>    <div>      <span>测试文字</span>    </div>  </div></div>

预览:

这里选择了 div 元素的直接子元素 div,这里只有后面的 div 里还有嵌套的 div,满足这个关系,然后选择了它下面的、直接的 span 元素,这里只有 <span>测试文字</span> 这个元素满足这个关系,所以把它文字改成了红色。

各种组合运算符之间,也可以互相组合使用,代码如下:

<style>  span + div > div span {    color: red;  }</style><div>  <p>这个是一个<span>段落</span></p>  <span>一些文字</span>  <div>    <div>      <span>测试文字</span>    </div>  </div></div>

预览:

这里先选择了 span 元素直接相邻的 div 元素,那么就选择了 <span>一些文字</span> 后面的 div,之后有选择它的直接子元素 div,再后面选择了它的所有 span 子元素,那么,只有 <span>测试文字</span> 是满足条件的,把它的文字改成了红色。

tip

示例中的选择结果都只有一个元素满足条件,实际情况可以选择多个满足条件的元素。

小结#

CSS 组合运算符可以把具有位置关系的几组选择器关联起来,可以用来选择子元素、直接子元素、相邻节点和直接相邻节点,运算符前面的选择器是限定起始元素的,后面的选择器才是真正要选择的元素。