https://zhuanlan.zhihu.com/ p/180011240For novices, it is often difficult to understand the usage of these symbols in the layout. Today, I will explain them in detail.
1. > (greater than sign) child element selector
> The greater than sign means to select the first generation of child elements after an element
case
<style type="text/css">
h1>strong {
color: red;
}
</style>
<body>
<h1>
<strong>一代子元素</strong>
</h1>
<h1>
<span>
<strong>二代子元素</strong>
</span>
</h1>
</body>2. ~ (tilde)
~The tilde means to select all the same elements after an element
.box~h2 This sentence is to select all h2 after .box
Both elements of this selector must be within the same parent element, and the selected element does not have to immediately follow.
<style type="text/css">
.box~h2{
background: aqua;
}
</style>
<body>
<div class="box"></div>
<h2>1</h2>
<em>2</em>
<h2>3</h2>
<h2>4</h2>
</body>3. (space) Derived selector
Selects all child elements after an element
Derived selectors allow you to style a tag based on the context of the document
Here is the first example
<style type="text/css">
h1 strong {
color: red;
}
</style>
<body>
<h1>
<strong>一代子元素</strong>
</h1>
<h1>
<span>
<strong>二代子元素</strong>
</span>
</h1>
</body>4, , (comma) group selector
Selectors can be grouped, and the grouped selectors can share the same declaration
<style type="text/css">
h1,h2,h3{
color: blue;
}
h4,h5,h6{
color: red;
}
</style>
<body>
<h1>案例1</h1>
<h2>案例1</h2>
<h3>案例1</h3>
<h4>案例2</h4>
<h5>案例2</h5>
<h6>案例2</h6>
</body>5. + (plus sign) adjacent sibling selector
Elements immediately after another element that have the same parent element can be selected
<style type="text/css">
span+em{
color: red;
}
</style>
<body>
<h1>
<span>案例1</span>
<em>案例2</em>
</h1>
</body>