使用 （+）符号。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 + p {
color: red;
}
</style>
</head>
<body>
<h1>h2+p CSS test</h1>
<h2>[s1] Section 1</h2>
<p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac rhoncus mauris. Vivamus augue odio, placerat in semper nec, rutrum ac purus.</p>
<p>2) Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In eu nisl elit, eget sagittis enim. Ut porttitor orci mauris.</p>
<p>3) Phasellus pretium, arcu at varius posuere, magna est venenatis urna, et congue dolor lectus vel dui.</p>
<h2>[s2] Section 2</h2>
<p>1) Mauris at iaculis nisl. Proin ultricies laoreet sem, nec egestas enim porta in. Proin magna dui, tincidunt elementum semper consequat, semper quis dolor. Nullam enim massa, vestibulum ut scelerisque nec, congue eu nibh.</p>
<p>2) Nulla facilisi. Aenean ullamcorper dictum dolor in posuere. Duis lorem dolor, aliquet in vestibulum id, adipiscing non velit.</p>
<h2>[s3] Section 3</h2>
<p>1) [s3 p1] Cras tincidunt euismod velit sit amet consectetur. Maecenas eget est felis, et viverra metus.</p>
<p>1) [s3 p2] Nullam in turpis et enim luctus consequat. Ut enim magna, pulvinar vel porta a, molestie nec risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce a ipsum metus, a convallis quam. Cras elementum ullamcorper nisl, quis porta neque vehicula sed.</p>
</body>
</html>
源码下载：
siblingselectors.zip
分享到：
相关推荐
CSS3选择器--关系选择器 关系选择器 01 子代选择器（>） 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E>F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器（>） 示例：设置 h1 ...
3. id 选择器 id选择器是指用于选择特定id的元素的选择器。例如：#header{ display:none;} <div id="header"></div>。id选择器的优先级高于类选择器和元素选择器。 4. 类（属性、伪类）选择器 类选择器用于选择...
选择器1选择器2选择器3{ 属性： 属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 （5）伪类选择器（只用于链接 用：表示） a:link 未访问过的链接 a:...
1.子选择器 复制代码代码如下: <...2.相邻选择器 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。 例如，如果要增加紧
文章目录CSS第二课-复杂选择器群组选择器属性选择器根据属性名查找元素根据属性值精确查找多属性选择器根据属性值近似查找根据标签查找派生选择器后代选择器子元素选择器相邻兄弟选择器 CSS第二课-复杂选择器 群组...
2.5.8 相邻选择器 37 2.5.9 CSS的优先权 37 2.6 伪元素 39 2.7 样式类 41 2.7.1 ID类 41 2.7.2 伪类 42 2.7.3 类继承 44 2.8 样式表的层叠性 47 2.9 注释 49 2.10 CSS的属性和值 49 2.10.1 字体属性 49 2.10.2 文本...
4. 相邻选择器（h1 + p） 5. 子选择器（ul > li） 6. 后代选择器（li a） 7. 通配符选择器（*） 8. 属性选择器（a[rel = "external"]) 9. 伪类选择器（a:hover, li:nth-child） 继承问题： * 可继承的样式：font-...
3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ ...
交集选择器 并集选择器 后代选择器 子代选择器 相邻元素选择器 兄弟元素选择器 外边距 内边距 边框 怪异盒模型 父子元素外边距合并 兄弟元素外边距合并
1、对伪类的支持。IE6和更低的版本对于伪类的支持仅限于a标签，诸如“:hover”、“:...3、对相邻选择器的支持。你可以指定同一父元素下的紧邻某个元素之后的元素的样式 * p { color: Blue; } 4、对相邻选择器的扩展
JavaWeb概述, B/S结构, HTML语法, 标签(文本, 列表, 表格, 表单, 框架, 超链接) CSS选择器(简单选择器, 组合选择器, 伪类/伪元素/属性选择器, 后代/子元素/相邻兄弟选择器) CSS常用样式属性
通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。我们可以使用:before和:...这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现，下面是一个简单的例子：
相邻兄弟选择器：用+ 多元素选择器：用，隔开 2.3属性选择器 根据元素的属性来选取元素，元素加方括号加大括号 2.3.1存在选择器 例：p[id]，指的是含有id属性的p标签 2.3.2相等选择器 例：p[id="id"]，指的是...
三.css样式和选择器 选择器 空格 后代选择器 .main div{ } 后代所有div >大于号 子元素选择器 .main>div{ } 所有儿子div ＋加号 相邻元素选择器 .main>ul＋div{ } 紧随ul其后的一个同代div ～波浪线 兄弟选择器 .m
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案，比如，如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果，以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。 写得很烂。可能大家看不出...
风格：修改编辑器风格非常容易，只需修改一个 CSS 文件 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera ver 4.0.4 (2011-12-11) 新增: 阿拉伯语语言包。 改善: 上传文件时显示上传中...
这是的解决方案。 前端导师挑战通过构建现实项目...我学会了这个组合子“+”，它被称为相邻兄弟选择器。 它用于选择直接在另一个特定元素之后的元素。 兄弟元素必须具有相同的父元素，“相邻”意味着“紧随其后”。 .