使用 （+）符号。
<!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
分享到：
相关推荐
相邻选择器（E+F）选中紧接在指定元素（E）后的第一个匹配元素（F），而兄弟选择器（E~F）选中所有位于指定元素（E）后面的兄弟元素（F），这要求两者具有相同的父元素，但不一定要相邻。 属性选择符是基于HTML元素...
- **组合选择器**：可以将多个选择器组合使用，如相邻兄弟选择器（`A + B`）、后代选择器（`A B`）和伪类选择器（`:hover`、`:active`、`:focus`等）。 - **选择器优先级**：ID选择器>类选择器>标签选择器>内联样式...
CSS3是CSS的最新版本，引入了更多强大且灵活的选择器，使得网页设计和开发更加精细化。下面我们将详细探讨CSS3选择器的相关知识点。 1. 基本选择器： - **类型选择器**：通过元素名来选择元素，如`p`选择所有的...
更复杂的组合选择器，如后代选择器（`div p`）、子选择器（`div > p`）和相邻兄弟选择器（`div + p`），可以帮助精确地定位页面上的元素。 规则声明由选择器和声明块组成。声明块内包含一系列以分号分隔的声明，每...
- **示例展示**：通过实例代码展示相邻兄弟选择器的使用方法。 - **5.9 CSS伪类(Pseudo-classes)** - **伪类定义**：介绍伪类的含义及如何表示元素的特殊状态。 - **示例应用**：提供示例代码展示伪类的应用。 - ...
}</style><div id="myId1">这是使用ID样式的唯一区块</div>CSS选择器的优先级在CSS中，选择器的优先级决定了当多个规则应用于同一元素时，哪个规则的样式会被应用。优先级从高到低排序如下： 1. 内联样式 (如 `...
CSS 规则是 CSS 样式表的基本组成部分，它由选择器和声明组成。选择器是用于选择要应用样式的 HTML 元素，而声明是用于定义样式的属性和值。 示例： h1 { color:red; font-size:14px; } h1,h2,h3{ color:red; } ...
本文将基于提供的CSS3默认样式代码片段，深入分析各个选择器及其作用，并探讨如何在实际项目中有效利用这些样式规则。 #### 二、全局样式设置 1. **字体大小与颜色**：通过`body, textarea, input, select, option`...
本篇文章将探讨如何使用CSS选择器来优化代码，使之适用于IE7+、Firefox 3、Opera 9以及Chrome等主流浏览器。 首先，理解CSS选择器的性能差异是优化的关键。CSS选择器分为多个级别，从基础的ID选择器(#id)、类选择器...
CSS的相邻兄弟选择器是CSS选择器中用于定位和样式化具有相同父元素的相邻元素的工具。它的主要作用是选取紧接在另一个元素后的元素，且这两个元素必须拥有同一个父级元素。相邻兄弟选择器的用法相对简单，只需要理解...
在CSS中，有多种选择器类型，包括基本选择器（如标签选择器、类选择器、ID选择器和通配符选择器）、组合选择器（如后代选择器、子选择器、相邻兄弟选择器和一般同胞选择器），以及更高级的选择器如属性选择器和伪类...
CSS3选择器是CSS3规范中...CSS3选择器扩展了CSS的能力，使得开发者能更加灵活和精确地控制页面布局和样式。通过这些选择器，可以针对页面上几乎任何特定的元素进行样式定制，从而创建更加丰富和交互性强的用户体验。
相邻选择器的优点是可以选取特定的元素，但缺点是只能选取第一个元素。 8. 子选择器（X>Y） 子选择器用于选取X元素下的直接子元素Y。例如：`div#container > ul { border: 1px solid black; }`，这将将div元素下的...
CSS3引入了许多新的选择器，如伪类（`:hover`、`:active`、`:focus`等）、伪元素（`::before`、`::after`）、属性选择器（`[attr=value]`）、子选择器（`>`）、相邻兄弟选择器（`+`）、一般同胞选择器（`~`）等。...
更高级的选择器有属性选择器、子选择器（>）、同胞选择器（~）和相邻兄弟选择器（+）等。 3. **优先级**：CSS中的优先级规则决定了哪些样式会被应用。内联样式（style属性）> 内部样式表（`<style>`标签）> 外部...
在CSS样式表中，选择器是用于指定元素样式的关键工具。它们决定了哪些规则将应用于页面上的特定元素。选择器的特殊性（Specificity）是CSS优先级的一种度量，用于解决当多个选择器同时影响同一个元素时的样式冲突...
jQuery支持多种CSS选择器，包括基本选择器（如`#id`、`.class`、`tag`）、关系选择器（如`>`、`+`、`~`）、属性选择器（如`[attr]`、`[attr=value]`、`[attr^=value]`等）以及伪类选择器（如`:hover`、`:first-child...
以下是一些CSS3选择器的详细介绍： **一、基本选择器** - **通配符选择器（*）**：用于选择所有元素，如`*{margin:0;padding:0;}`可以清除所有元素的默认边距和填充。 - **元素选择器（E）**：选择特定的HTML元素，...
在CSS（层叠样式表）的学习过程中，实践是掌握各种选择器和技巧的关键。这个“很不错的CSS练手文件代码”提供了一个绝佳的机会，让你深入理解并熟练运用多种选择器。下面，我们将详细探讨这些重要的CSS选择器及其...