CSS 选择器
CSS组合器阐明了两个选择器之间的关系，而CSS中的选择器用于选择样式内容。
可以
CSS选择器中有多个简单选择器，在这些选择器之间，我们可以包含一个组合器。组合器将选择器组合在一起，为它们提供有用的关系和内容在文档中的位置。
通用同级选择器（〜）
它使用
（〜）符号作为元素之间的分隔符。它选择跟随第一个选择器的元素的元素，并且它们都是同一父级的子级。可用于选择共享公共父元素的元素组。
当我们必须选择元素的同级对象时，即使它们不是直接相邻，也很有用。
语法
element ~ element {
/*style properties*/
}
假设我们必须选择所有
<p> 元素，它们是
<div> 元素的同级元素，那么我们可以将其写为：
div ~ p {
/*style properties*/
}
下面给出的图帮助我们理解常规的同级选择器（〜）。
在此图中，绿色的块是使用通用的同级选择器后受影响的选定块。
示例
在此示例中，我们选择
<h2> 之后的
<p> 元素。有一个
<div> 元素不会被选中，并且div中的段落元素也不会被选中。但是在
<div> 之后出现的
<p> 元素将受到影响。
此示例将说明常规同级选择器（ 〜）。
<!DOCTYPE html>
<html>
<head>
<title>General Sibling Selector</title>
<style>
body{
text-align: center;
}
h1 ~ p{
color: blue;
font-size: 25px;
font-weight: bold;
text-align: center;
}
div {
font-size: 32px;
}
</style>
</head>
<body>
<h1>General sibling selector (~) property</h1>
<p>It is the first paragraph element which will get effected.</p>
<div> It is the div element
<p> It is the paragraph under the div element </p>
</div>
<p>It is the paragraph element after the div</p>
<p>It is the paragraph element which will also get affected</p>
</body>
</html>
输出
相邻的同级选择器（+）
它使用
加号（+）作为元素之间的分隔符。仅当该元素紧接在第一个元素之后并且它们都是相同父级的子代时，它才与第二个元素匹配。这个同级选择器选择相邻的元素，或者可以说是位于指定标记旁边的元素。
它仅选择紧邻指定的第一个元素的元素。
语法
element + element {
/*style properties*/
}
如果我们必须选择紧接在另一个段落之后的段落，则使用相邻的选择器，它将如下所示：
p + p {
/*style properties*/
}
下面给出的图帮助我们理解相邻的兄弟选择器（+）。
在此图中，绿色的块是使用相邻的同级选择器后受影响的所选块。可以选择紧接在另一个段落元素之后的那些段落元素。
示例
在此示例中，我们选择
<p> 元素，紧接在
<p> 元素之后。有一个
<div> 元素不会被选中，并且div之后的段落元素也不会被选中。但是第三段旁边的
<p> 元素将受到影响。
此示例将说明相邻的同级选择器（+）的使用。
<!DOCTYPE html>
<html>
<head>
<title> Adjacent Sibling Selector </title>
<style>
body{
text-align: center;
}
p + p{
color: Blue;
font-size:25px;
font-weight: bold;
text-align: center;
}
p {
font-size: 32px;
}
</style>
</head>
<body>
<h1> Adjacent sibling selector (+) property</h1>
<p> It is the first paragraph </p>
<p> It is the second paragraph which is immediately next to the first paragraph, and it get selected. </p>
<div> This is the div element </div>
<p> This is the third paragraph which does not get affected </p>
<p> This paragraph is also selected because it immediately next to third paragraph </p>
</body>
</html>
输出
Children选择器（>）
它使用大于
（>）的符号作为元素之间的分隔符。它选择父级的直接后代。该组合器仅匹配文档树中直接子元素。与后代选择器相比，它更严格，因为仅当第一个选择器是其父级时才选择第二个选择器。
父元素必须始终置于
">" 。如果我们删除大于该符号的
（>）符号，则它将成为后代选择器。
语法
element > element {
/*style properties*/
}
使用子选择器，将其编写如下：
div > p {
/*style properties*/
}
下面给出的图帮助我们理解子选择器（>）。
在该图中，绿色的块是使用子选择器后受影响的所选块。正如我们在图中所看到的，只有那些属于div元素的直接子元素的段落元素可供选择。
示例
在此示例中我们选择的
<p> 元素是
<div> 元素的子元素。它仅选择那些是div元素的直接子元素的段落元素。
此示例将说明子同级选择器（>）的用法。
<!DOCTYPE html>
<html>
<head>
<title> Child Selector </title>
<style>
body{
text-align: center;
}
div > p{
color: Blue;
font-size:25px;
font-weight:bold;
text-align:center;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1> Child selector (>) property</h1>
<p> It is the first paragraph </p>
<p> It is the second paragraph </p>
<div>
<h1>This is the div element</h1>
<p> This is the third paragraph which is the child of div element </p>
<p> This is the fourth paragraph and also get selected because it is also the child of div element </p>
</div>
</body>
</html>
输出
后代选择器（空格）
它使用空格作为元素之间的分隔符。 CSS后代选择器用于匹配特定元素的后代元素，并使用单个空格表示它。后代一词表示嵌套在DOM树中的任何位置。它可以是直接子级，也可以深于五个级别，但仍将称为后代。
它结合了两个选择器，其中第一个选择器代表祖先（父母，父母的父母等）。 ），第二个选择器代表后代。如果第二个选择器匹配的元素的祖先元素与第一个选择器匹配，则选择它们。
语法
element element {
/*style properties*/
}
使用后代选择器，它将如下所示：
div p {
/*style properties*/
}
下面给出的图帮助我们理解后代选择器。
示例
<!DOCTYPE html>
<html>
<head>
<title> Descendant Selector </title>
<style>
body{
text-align: center;
}
div p{
color: blue;
font-size:28px;
font-weight: bold;
text-align: center;
}
p,div {
font-size: 25px;
}
</style>
</head>
<body>
<div>
<p> This is 1st paragraph in the div. </p>
<p> This is 2nd paragraph in the div. </p>
<span>
This is the span element in the div
<p> This is the paragraph in the span. It will also be affected. </p>
</span>
</div>
<p> Paragraph 4. It will not be affected because it is not in the div. </p>
</body>
</html>
输出
