'+' 与 '~' 选择器有什么不同
Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 317 (opens in a new tab)
Author 回答者: shfshanyue (opens in a new tab)
+选择器匹配紧邻的兄弟元素~选择器匹配随后的所有兄弟元素
Author 回答者: QC2168 (opens in a new tab)
~ + 选择器不同之处
~ 是匹配元素之后的选择器
+ 是匹配相邻元素选择器
<div>我是div</div>
<p>我是p</p>
<p>我是p</p>
<div>我是div</div>
<p>我是p</p>
<div>
<p>我是div下面的p</p>
<p>我是div下面的p</p>
</div>
<span>我是span</span>
<style>
div+p {
color: red;
}
/* 第一个p标签变红色了 */
div~p{
color:red;
}
/* div后面的p标签都变成红色了 */
</style>
Author 回答者: Psycho-Monster (opens in a new tab)
div后相邻的p标签文字都会变红，而不是只有第一个p标签变红
Author 回答者: yxw007 (opens in a new tab)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>title</title>
<style>
/* + 选择器选取紧接着的相邻连续兄弟元素 */
.d1 p + p {
color: red;
}
/* ~ 选择器选取后面所有的同级兄弟元素 */
.d2 p ~ p {
font-weight: bold;
}
</style>
</head>
<body>
<div class="d1">
<p>第一个段落</p>
<p>第二个段落</p>
<p>第二个段落</p>
<span>span</span>
<p>第三个段落</p>
</div>
<br />
<div class="d2">
<p>第一个段落</p>
<p>第二个段落</p>
<span>span</span>
<p>第三个段落</p>
</div>
</body>
</html>
"+" 选择器匹配紧邻的连续兄弟元素，这样描述更准确