一、后代选择器
后代选择器（descendant selector）又称为包含选择器。
如：作为 h1 元素后代的 任何 em 元素
h1 em { color:red;}
二、子元素选择器
子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如：选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
示例：第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
三、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
例如：如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
2474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
