"~" conditional startup selector in CSS selection

occasionally see a statement: 

s1:hover ~ s2{color:red;}

it is found that "~" can make the selector achieve the effect of "if", that is, if the previous condition is met, the selector of S2 will be started.
but google didn"t find the tutorial materials for a long time. W3c/mdn checked it. I really don"t know the name of this knowledge point, and I can"t look up
. I hope the gods will give some guidance.

_

first of all, thank you for your advice ~
the reason has been found, but the reason is dynamic pseudo-class + sibling selector , all the knowledge points have been learned, but there has been no actual combat. When I looked at the original code of an example yesterday, I suddenly froze. I thought that ~ was a new symbol of HTML5, drilling into a dead end for a long time.

it seems that just reading books and doing exercises can not be integrated. There is no creativity and integration in the brain. If you encounter practical problems, you will get stuck, and you will really collapse.

Thank you again for your help

Css html5
Apr.02,2021

https://developer.mozilla.org.

I think you think this" ~ "is too high-end, if you think: hover as an element, is it understandable?

you are right. It must be that the front is satisfied before it will start the back, but google did not find the information for half a day, it can be seen that your google level is relatively poor.

  1. search for css selector ~
  2. arrives at MDN CSS selectors
  3. search within the page ~
  4. find content
The symbol

means that all sibling elements after the current element
.S1: hover ~ .s2 is interpreted as S1 applying styles to S2 of the level after in the hover state

. 
s1</div>
    </div>
</div>

Previous: How to solve the problem of multi-table modification in nodejs sequelize framework?

Next: How to register a function in a vue template file?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu