CSS相邻兄弟选择器和普通相邻兄弟选择器
2016-11-14 21:55
344 查看
看字面意思很难区别，直接上代码看效果
相邻兄弟选择器：
<!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>
由效果可见，相邻兄弟选择器只对某一元素之后的第一个匹配的相邻兄弟起作用，但是普通相邻兄弟选择器对相关元素之后的所有匹配的兄弟元素都起作用
相邻兄弟选择器：
<!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>
由效果可见，相邻兄弟选择器只对某一元素之后的第一个匹配的相邻兄弟起作用，但是普通相邻兄弟选择器对相关元素之后的所有匹配的兄弟元素都起作用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css 派生选择器+子选择器+相邻兄弟选择器
- css_day02_各种选择器基本使用（相邻兄弟选择器+，兄弟选择器~）
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
- css中相邻兄弟选择器
- CSS 相邻兄弟选择器
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
- CSS 相邻兄弟选择器
- CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器
- CSS后代选择器、子元素选择器、相邻兄弟选择器
- CSS相邻兄弟选择器
- CSS 相邻兄弟选择器
- CSS 相邻兄弟选择器
- CSS 相邻兄弟选择器
- JQuery选择器杂记祖宗和后代 父亲和儿子 临近兄弟 普通兄弟
- 兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式
- CSS相邻同胞选择器
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧实现评论点赞
- css中的外边距合并时垂直方向上的普通流相邻元素间
- 相邻选择器、兄弟选择器
- CSS/Xpath 选择器 第几个子节点/父节点/兄弟节点