CSS3 之 复合选择器

交集选择器

交集选择器，找到指定标签间的共有部分

语法

element.class || element#id
{
    CSS 样式;
}

实例

选择 p标签里的 class="important" 的标签。

<style>
    p.important {color:green;}
</style>

<h1 class="important">大数据男孩</h1>

<p id="important">该标签被选择</p>

<p class="important">大数据男孩</p>

并集选择器

并集选择器，找到所有满足的标签

语法

element1,element2,element3,...
{
    CSS 样式;
}

实例

<style>
    .important,#important,.union
    {
      color:green;
    }
</style>

<h1 class="important">该标签被选择</h1>

<p id="important">该标签被选择</p>

<p class="important">大数据男孩</p>

<p class="union">该标签被选择</p>

<p>大数据男孩</p>

后代选择器

后代选择器，选择elment1元素内部的element2元素

语法

element1 element2
{
    CSS 样式;
}

实例

div p{
        color: green;
    }

<div>
   <h1 class="important">大数据男孩</h1>
</div>

<div>
   <p id="important">该标签被选择</p>
</div>

<p>大数据男孩</p>

子元素选择器

子元素选择器，选择element1元素中符合直接子元素的element2元素

语法

element1 > element2
{
    CSS 样式;
}

实例

div>p{
        color: green;
    }

<div>
   <h1 class="important">大数据男孩</h1>
</div>

<div>
   <p>该标签被选择</p>
</div>

<div>
   <p>该标签被选择</p>
   <p>该标签被选择</p>
   <p>该标签被选择</p>
</div>

<p>大数据男孩</p>

相邻兄弟选择器

相邻兄弟选择器，element1 元素之后紧跟的第一个元素。

语法

element1 + element2
{
    CSS 样式;
}

实例

div+p{
        color: green;
    }

<div>
   <h1 class="important">大数据男孩</h1>
</div>

<div>
   <p>该标签被选择</p>
</div>

<div>
   <p>该标签被选择</p>
</div>

<p>大数据男孩</p>
<p>大数据男孩</p>

兄弟选择器

兄弟选择器，选择具有相同父元素的同级元素

语法

element1 ~ element2
{
    CSS 样式;
}

实例

p~div{
        color: green;
    }

<div>
   <h1 class="important">大数据男孩</h1>
</div>
<div>
   <p>大数据男孩</p>
</div>
<p>大数据男孩</p>
<div>
   <p >该标签被选择</p>
</div>
<p>大数据男孩</p>