看字面意思很难区别，直接上代码看效果
相邻兄弟选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>
普通相邻兄弟选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
由效果可见，相邻兄弟选择器只对某一元素之后的第一个匹配的相邻兄弟起作用，但是普通相邻兄弟选择器对相关元素之后的所有匹配的兄弟元素都起作用
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
