css中“~”（波浪号）、“，”（逗号）、“+”（加号）和“&g

前言：笔记整理，内容并非原创

---

例子1：

代码：

p~ul{
　　 background:#029AFD;
}
<p>段落P</p>
<ul>
　　 <li>列表项1</li>
　　 <li>列表项2</li>
　　 <li>列表项3</li>
</ul>

解说：

p~ul选择前面有<p>元素的每个<ul>元素，即选择p之后出现的所有ul，两种元素必须拥有相同的父元素，但ul不必紧随p。
css中“>”是css3中特有的选择器，A>B表示选择A元素的所有子B元素，与A B不同的是，A B选择所有后代元素，为A>B只选择一代。

A B{}选择A所有的后代B元素
A>B{}选择A的一代B元素
A+B{}这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

例子2：

如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

 h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝；

例子3：

实现下面图片这个效果

1.PNG

代码：

ul li+li{
      border-top: 1px solid #ccc;
}

先不看后面的+li，意思就是选择ul中所有的后代li元素，因为后面使用了li+li，所以选择ul中第一个li之后所有的li标签并设置border-top。
同理：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个及后面的li都变为粗体，但第一个列表项不受影响。

总结

---

1. A>B 表示选择A元素的所有子B元素（只选择第一代）
2. A B 表示选择A元素的所有子B元素（选择在A标签里面所有的B元素，不止第一代）
3. A+B表示HTML中紧随A的B元素：用一个结合符只能选择两个相邻兄弟中的第二个元素