组合选择符说明了两个选择器之间的关系
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
后代选择器
后代选择器用于选取某元素的后代元素，以空格分隔
下面举个栗子，下面的代码会把div元素后代的p元素背景变为粉红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div p
{
background-color:pink;
}
</style>
</head>
<body>
<div>
<p>后代元素1</p>
<p>后代元素2</p>
</div>
<p>不是后代元素</p>
</body>
</html>
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。
<!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>
这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
相邻兄弟选择器
当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
语法：前方元素 + 目标元素 {样式声明 }
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {background-color:pink;}
</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>
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1 在 div 中。</p>
<p>段落 2 在 div 中。</p>
</div>
<p>段落 3不在 div 中。</p>
<p>段落 4不在 div 中。</p>
</body>
</html>
网友评论