css 如果有特定的子类，更改主类属性

【问题标题】：css if there is a specific subclass, change the main class propertycss 如果有特定的子类，更改主类属性
【发布时间】：2021-07-06 06:09:01
【问题描述】：

有一个类叫做 main-layout。如果布局中有一个名为 side-nav 的类，我想将填充留给主布局。

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

.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;
}

【问题讨论】：

标签： html css layout sass flexbox

【解决方案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>

【讨论】：