使用 （>）符号。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body > p {
color: red;
}
</style>
</head>
<body>
<h1>body > 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>
<div>
<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>
</div>
<h2>[s3] Section 3</h2>
<p>1) Cras tincidunt euismod velit sit amet consectetur. Maecenas eget est felis, et viverra metus.</p>
<p>2) 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>
源码下载：
childselectors.zip
分享到：
相关推荐
CSS3选择器总结 CSS（层叠样式表）是用于控制...这些CSS3选择器提高了开发者对页面布局和样式的控制能力，使得样式的应用更加精确和多样化。通过合理地使用CSS选择器，开发者可以编写出更加高效和可维护的CSS代码。
CSS3是CSS的最新版本，引入了更多强大且灵活的选择器，使得网页设计和开发更加精细化。下面我们将详细探讨CSS3选择器的相关知识点。 1. 基本选择器： - **类型选择器**：通过元素名来选择元素，如`p`选择所有的...
CSS3扩展了选择器的功能，引入了更强大的选择器，如类选择器、ID选择器、属性选择器和伪类选择器等。例如，`:nth-child()`和`:nth-of-type()`允许你基于元素在父元素中的位置来选择元素，`[:target]`可以选取URL锚点...
1. **选择器**：新增了伪类选择器如`:nth-child(n)`、`:not()`、`:target`等，使得更精确地定位元素成为可能。 2. **边框与背景**：边框可以是圆角 (`border-radius`)，甚至可以是梯形 (`border-image`)。背景可以...
### CSS3 选择器详解 #### 一、概述 随着 Web 技术的不断发展，CSS3 带来了更为强大的选择器功能，极大地提升了网页设计的灵活性与效率。本篇文章将深入探讨 CSS3 选择器中的重要成员——`:nth` 选择器系列，并...
1. **选择器增强**：CSS3引入了更强大的选择器，如类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attr=value]`）和伪类选择器（`:hover`, `:active`, `:focus`, `:nth-child()`等），允许更精确地定位和...
}</style><div id="myId1">这是使用ID样式的唯一区块</div>CSS选择器的优先级在CSS中，选择器的优先级决定了当多个规则应用于同一元素时，哪个规则的样式会被应用。优先级从高到低排序如下： 1. 内联样式 (如 `...
- **嵌套规则**：在CSS中，可以将选择器组合起来，如`.parent .child`选择父元素内的子元素。 - **媒体查询（Media Queries）**：利用媒体查询，CSS样式可以响应不同的设备和屏幕尺寸，实现响应式设计。 - **变量...
本篇文章将探讨如何使用CSS选择器来优化代码，使之适用于IE7+、Firefox 3、Opera 9以及Chrome等主流浏览器。 首先，理解CSS选择器的性能差异是优化的关键。CSS选择器分为多个级别，从基础的ID选择器(#id)、类选择器...
CSS3选择器是CSS3规范中...CSS3选择器扩展了CSS的能力，使得开发者能更加灵活和精确地控制页面布局和样式。通过这些选择器，可以针对页面上几乎任何特定的元素进行样式定制，从而创建更加丰富和交互性强的用户体验。
理解CSS的选择器权重（ID、类、属性和元素选择器的组合）至关重要，这决定了哪些样式会覆盖其他样式。 **五、媒体查询与响应式设计** `@media`规则是实现响应式设计的关键，允许根据设备特性和视口尺寸应用不同的...
本手册详细介绍了CSS的基本概念、语法、选择器、布局模式以及高级特性，旨在帮助读者全面理解并熟练掌握CSS。 **一、CSS基本概念** CSS是一种样式描述语言，用于规定元素如何在屏幕上显示。它由一系列规则组成，每...
4. **行样式**：可以使用`tr:nth-child(even)`和`tr:nth-child(odd)`选择器分别设置偶数行和奇数行的样式，实现交替背景色效果。 ```css tr:nth-child(even) { background-color: #f2f2f2; } tr:nth-child(odd)...
通过使用组合器（Combinator）将选择器的描述写得更加精确（参考CSS选择器 – MDN ），例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会对.fruit中的.apple也造成影响。...
《使用ie-css3.js让IE浏览器支持CSS3高级选择器》 在现代Web开发中，CSS3已经成为构建精美网页和复杂交互的必备工具，其中高级选择器提供了更强大的样式控制能力。然而，早期版本的Internet Explorer（IE6、IE7、IE...
此外，通过使用`attribute`选择器，我们可以基于元素的属性值来应用样式，这对于创建特定图形样式非常有用。 接着，CSS3中的边框和背景属性也极大地丰富了图形设计的可能性。例如，`border-radius`可以让我们创建...
jQuery支持多种CSS选择器，包括基本选择器（如`#id`、`.class`、`tag`）、关系选择器（如`>`、`+`、`~`）、属性选择器（如`[attr]`、`[attr=value]`、`[attr^=value]`等）以及伪类选择器（如`:hover`、`:first-child...
在给定的“css input type选择器”主题下，我们将深入探讨CSS中的类型选择器以及如何针对`input`元素的不同类型应用样式。 首先，让我们理解CSS类型选择器的基本概念。类型选择器通常是HTML元素标签名，如`p`、`div...
在IT领域，尤其是在前端开发中，CSS3是现代网页设计不可或缺的一部分，它引入了许多新的选择器，极大地增强了样式表的功能和灵活性。然而，早期版本的Internet Explorer（IE）浏览器，尤其是IE8及以下版本，对CSS3...
- `tr:nth-child(n)`：选择器可以用来给表格的特定行设置样式，例如交替行背景色。 - `td:nth-of-type(n)`：用于选中特定列的单元格，可以用来实现列的特殊样式。 4. **边框样式**： - `border`属性用于设置...