关系选择器

关系选择器

 

关系选择器分类

1. 后代选择器

2. 子代选择器

3. 相邻兄弟选择器

4. 通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素,中间用空格隔开

语法

E F{}

<ul>
    <li>宝马</li>
    <li>奔驰</li>
</ul>
<ol>
    <li>奥迪</li>
</ol>
ul li{
    color:green;
}

子代选择器

定义

选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示

语法

E>F{}

<div>
    <a href="#">子元素1</a>
    <p><a href="#">孙元素</a></p>
    <a href="#">子元素2</a>
</div>
div>a{
    color:red;
}

相邻兄弟选择器

定义

选择紧跟E元素后面的F元素,用加号表示,选择相邻的第一个兄弟元素,只能向下选择

语法

E+F{}

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1+p{
    color:red;
}

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开,只能向下选择

语法

E~F{}

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1~p{
    color:red;
}