, ~, +, space, comma, the usage of these CSS symbols, not only the beginner, even many junior engineers do not understand their usage. If you are a novice, you can still talk about it in the past. After all, you have just come into contact with it, and you have not even come into contact with it yet. It is normal that you do not know or use it.
child combinator ( > )
syntax
selector1 > selector2 {
style properties
}
The child combiantor ( > ) is locate at two CSS selectors.
ul > li {
margin: 15px;
}
Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
Descendant combinator
The descendant combinator — typically represented by a single space (" “) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.The descendant combinator represented by a single space (” “) character combines two selectors.
synatx
selector1 selector2 {
/* property declarations */
}
examples
li li {
color: green;
}
<ul>
<li>
<div>Item I</div>
<ul>
<li>Subitem A</li>
</ul>
</li>
<li>
<div>Item II</div>
<ul>
<li>Subitem A</li>
</ul>
</li>
</ul>
Adjacent sibling combinator
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element,.
The function of the plus sign (+) is to select the element immediately after it, and it is required that both have the same parent element.
syntax
example
h1+div {
height: 60px;
color: blue;
}
<body>
<div class="parent">
<div>first DIV</div>
<h1>title a</h1>
<div>second div</div>
<h1>title b</h1>
<input type="text" name="username" value="smith">
<div>third div</div>
</div>
</body>