1. Child selector (>)
Child selectors are mainly used to select the first-level child elements of an element. For example, if you want to select the strong element that is only a child element of the h1 element, you can write: h1>strong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Application of child selector</title>
<style type="text/css">
h1>strong{
color:red;
font-size:20px;
font-family:"Microsoft Yahei";
}
</style>
</head>
<body>
<h1>This <strong>knowledge point</strong> is <strong>important</strong></h1>
<h1>Be sure to learn <em><strong>well</strong></em>! </h1>
</body>
</html>
The <strong> in the first h1 tag is a child of h1, and the <strong> in the second h1 tag is a grandchild of h1, so only the first h1 tag has styles applied.
2. Brother selector (+, ~)
Sibling selectors are used to select sibling elements that are located in the same parent element as an element and are located after the element. It is divided into two types: adjacent sibling selectors and ordinary sibling selectors.
<1> Adjacent sibling selector
The selector uses the plus sign "+" to link the two selectors before and after. Two elements in the selector have the same parent, and the second element must immediately follow the first element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Apps near sibling selector</title>
<style type="text/css">
p+h2{
color:green;
font-family:"Song style";
font-size:20px;
}
</style>
</head>
<body>
<h2>"Under the Subeigu Mountain"</h2>
<p>Outside the green hills of Klook, in front of the green water. </p>
<h2>The tide is flat and the banks are wide, and the wind is blowing. </h2>
<h2>The sea is born in the dark night, and the river spring enters the old year. </h2>
<h2>Where can I get the local script? Returning Yan Luoyang side. </h2>
</body>
</html>
Only the h2 element immediately following the p element has the styles set in the code applied.
2. Ordinary Brother Selector
The normal sibling selector uses "~" to link the two options before and after. Two elements in the selector have the same parent, but the second element does not have to immediately follow the first.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Normal sibling selector</title>
<style type="text/css">
p~h2{
color:pink;
font-family:"Microsoft Yahei";
font-size:20px;
}
</style>
</head>
<body>
<p>The bright moon is born on the sea, and the world is at this time. <p>
<h2>The lover resents the night, and the lovesickness rises in the evening. </h2>
<h2>The candles are extinguished with pity, and the clothes are full of dew. </h2>
<h2>I can't bear to give it away, and it's a good time to sleep. </h2>
</body>
</html>
All sibling elements h2 of the p element have the styles set in the code applied.