How to use the Brother Selector in css
This article will explain in detail how to use the brother selector in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
Mainly explain the use of sibling selector in css, and what are the differences between + and ~? If you need to select an element immediately after another element, and the two have the same parent element, you can use the adjacent sibling selector.
+ the use of selector
For example:
H _ 2j _ p {
Margin-top:50px
Color:red
}
Thisisparagraph.
Thisisaheading.
Thisisparagraph.
Thisisparagraph.
The effect picture is as follows:
The brother selector will only affect the style of the p tag below, not the style of the brother above.
Note that the meaning of'+ 'here is different from that of' and'. The style of the sibling selector is applied to the sibling element and has nothing to do with the style of the referenced element. for example, the above example only affects the style of the p element and does not affect the style of the H2 tag. Of course, this will also loop, that is, when two sibling elements are the same, there will be a loop search:
Li+li {
Color:red
}
Listitem1
Listitem2
Listitem3
The effect is as follows:
Listitem1
Listitem2
Listitem3
You can see that the first li font color does not turn red, and the second and third element fonts turn red, which is because the third li is a sibling of the second li, so styles are also applied.
~ the use of selector
The function is to find all sibling nodes that follow a specified element. Sample code:
H _ 2j _ p {
Color:red
}
one
two
three
four
five
This is the end of the article on "how to use the Brother Selector in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
