What does the ~ between the two classes .mui-bar-nav~.mui-content mean?

Match all .mui-content after .mui-bar-nav (ie other classes or elements at the same level)

E.g:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .a ~ .b {
      color: red;
    }
  </style>
</head>
<body>
  <div class="a">a
    <div class="b">b1</div>
  </div>
  <div class="b">b2</div>
  <div class="b">b3</div>
</body>
</html>

It can be seen that b1 does not change color, and b2 and b3 change color.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324816968&siteId=291194637