css中选择器里的不同符号

1. 空格符

应用最多、最普通的选择器符号，表示满足条件的所以子代选择器。

div p{} //表示div中包含的所有p标签

2. 无空格符

表示同时满足同一个标签中的两个选择器，该css才起作用。

<div class="box1 box2"></div>
.box1.box2{color:red}

3. +

选择后面紧挨的兄弟元素。如下实例，内容为kkk的h1标签为b1的兄弟元素，且中间没有其他标签，所以该元素添加了color。

.b1+h1{color: rebeccapurple;}

<div class="b1">
    <h1>hhhhh</h1>
</div>
<h1>kkkk</h1>  //成功添加color
<span>qqq</span>
<h1>oooo</h1>

4. ~

选择后面满足条件的兄弟元素。以上面的程序为例，内容为kkkk和oooo的元素满足条件，添加颜色成功。

.b1~h1{color: rebeccapurple;}

<div class="b1">
    <h1>hhhhh</h1>
</div>
<h1>kkkk</h1>  //成功添加color
<span>qqq</span>
<h1>oooo</h1> //成功添加color

5. >
选择满足条件的所有子元素（仅限子元素，孙元素不计）。

.b1>h1{color: rebeccapurple;}
 <div class="b1">
    <h1>hhhhh</h1>   //成功添加color
    <div>
      <h1>ttttt</h1>
    </div>
    <h1>yyyyy</h1>  //成功添加color
  </div>