相邻选择符(E+F)

语法

  • E+F { sRules }

说明

选择紧贴在E元素之后F元素。

  • 与兄弟选择符不同的是,相邻选择符只会命中符合条件的相邻的兄弟元素。

E~F VS. E+F:

<style>
    /* 相邻选择符(E+F) */
    p+p{color:#f00;}
    /* 兄弟选择符(E~F) */
    p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

此例,如果使用p + p{color:#f00;},那么p2, p5将会变成红色;如果使用p ~ p{color:#f00;},那么p2,p3,p4,p5将会变成红色;

兼容性

IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
6.0 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0+
7.0+

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
p + p {
    color: #f00;
}
</style>
</head>
<body>
<div class="test">
    <h3>这是一个标题</h3>
    <p>这是一个文字段落</p>
    <p>这是一个文字段落</p>
    <h3>这是一个标题</h3>
    <p>这是一个文字段落</p>
    <h3>这是一个标题</h3>
    <p>这是一个文字段落</p>
    <p>这是一个文字段落</p>
</div>
</body>
</html>