css如果有具体的子class，换主class属性

Question

有一个 class 称为主布局。如果布局中有一个名为 side-nav 的 class，我想将填充留给主布局。

我尝试了这些方法，但没有用

.main-layout:has(.side-nav) {
   padding-left: 185px;
}

.main-layout .side-nav .main-layout {
   padding-left: 185px;
}

.main-layout .side-nav + .main-layout {
   padding-left: 185px;
}

.main-layout .side-nav ~ .main-layout {
   padding-left: 185px;
}

Answer 1

我从你的问题中了解到你想为主布局提供填充。如果对您有帮助，请找到以下代码！

.main-layout {
    padding-left: 185px;
 }

<!DOCTYPE html>
<html>
  <head>
    <title>Layout</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main-layout">
      <h1>This is a Heading</h1>
      <div class="side-nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

css如果有具体的子class，换主class属性

css if there is a specific subclass, change the main class property

html

css

layout

sass

flexbox