如何移除.main类下.options div的背景颜色

我给.main类下所有div元素添加了背景样式，但不希望该背景应用到.options div上（箭头指向的是不需要的背景）。我尝试在.options的CSS样式中添加background-color: transparent !important，但没有效果。

代码片段 #

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
}

body {
  background: url(https://wallpapercave.com/wp/d7W4Xn1.jpg)
    no-repeat center fixed;
  background-size: cover;
}

.btn-select {
  background-color: #008cba;
  border-radius: 10px;
  text-align: center;
}

.main {
  margin-top: 100px;
  background-color: transparent !important;
}

.main div {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 25px;
  width: fit-content;
}

.big {
  font-size: 60px;
}

.btn-game {
  border-radius: 10px;
}

.restart {
  width: 70px;
}

.new-game {
  width: 200px;
}

.score-div {
  display: none;
}

.num {
  display: none;
}

.options {
  text-transform: capitalize;
  margin: auto;
  width: 100%;
  background-color: transparent !important;
}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

.option {
  background-color: cyan !important;
  border-radius: 10px;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <body>
    <main class="text-justify text-center main">
      <div class="container">
        <h1 class="big"><span>All Flags</span></h1>
        <div class="container">
          <h2 class="score">Score: <span></span>/251</h2>
        </div>
        <h2 class="num">Question: <span></span></h2>
        <div class="flag-img">
          <img src="https://flagcdn.com/h240/jm.png" />
        </div>
        <div class="container options">
          <div class="text-justify text-center">
            <p class="option">Scotland</p>
            <p class="option">Guyana</p>
            <p class="option">Jamaica</p>
          </div>
        </div>
        <button onclick="restart()" class="btn-game restart">Restart</button>
        <button onclick="newGame()" class="btn-game new-game">
          Try a different gamemode
        </button>
        <div class="score-div">
          <h3 class="correct">Correct Answers: <span></span>/251</h3>
          <button onclick="restart()" class="btn-game restart">Restart</button>
          <button onclick="newGame()" class="btn-game new-game">
            Try a different gamemode
          </button>
        </div>
      </div>
    </main>
    <script src="all.js"></script>
  </body>

问题出在.main div这个选择器会匹配.main下所有层级的div，包括.options内部的子div。你只给.options本身设置透明背景，但它的子div还是会被.main div选中并应用白色背景，所以看起来没效果。

这里有两种实用的解决办法：

方法一：用否定选择器排除目标元素 #

直接修改.main div的选择器，把.options及其子div排除在外：

.main div:not(.options):not(.options div) {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 25px;
  width: fit-content;
}

这样就只会给.main下除了.options及其内部div之外的元素应用背景样式。

方法二：给需要背景的元素单独加类（更规范） #

避免使用.main div这种宽泛的选择器，而是给需要白色背景的div统一加一个自定义类，比如bg-card：

1. 先修改CSS：

.bg-card {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 25px;
  width: fit-content;
}

2. 然后在HTML里，给需要背景的div加上这个类，比如最外层容器、分数容器、国旗图片容器，而.options相关的div不添加：

<!-- 给需要背景的div加类 -->
<div class="container bg-card">
  <h1 class="big"><span>All Flags</span></h1>
  <div class="container bg-card">
    <h2 class="score">Score: <span></span>/251</h2>
  </div>
  ...
  <div class="flag-img bg-card">
    <img src="https://flagcdn.com/h240/jm.png" />
  </div>
  <!-- .options的div不加类 -->
  <div class="container options">
    ...
  </div>
  ...
</div>

这种方式代码更清晰，后续维护也更方便，不会出现意外的样式冲突。

内容的提问来源于stack exchange，提问作者nd03