Question

是否可以不将某些CSS类应用于特定的类或ID？我使用Materialize CSS框架在网格中有一个图像。我希望它突破网格并到达屏幕的各个角落。本质上，我想从名为.container的类中排除.row，.col和.break-grid css样式。但是，我仍然希望其他样式适用。（在这种情况下为.parallax-container和.parallax。

是否有比我追求的方法更好的“突破网格”方法？纯CSS / HTML解决方案将是首选，但我也愿意使用Javascript / Jquery来解决此问题。

这是我正在尝试执行的代码示例。我没有CSS，因为这是CSS框架（我不想编辑框架）。我需要CSS来修复我认为的更改。

<div class="container">
  <div class="row">
    <div class="col">
      <!-- Apply here -->
      <h1>Things</h1>
      <!-- Don't apply here -->
      <div class="parallax-container break-grid">
        <div class="parallax">
          <%= image_tag('infos/home/test_parallax.jpg')%>
        </div>
      </div>
      <!-- Apply here -->
      <h2>Stuff</h2>
    </div>
  </div>
</div>

Answer 1

您可以使用:not() CSS伪类。 ( On MDN )

  .container > .row > .col > *:not(.parallax-container) { 
    //styling
  }

注意：意识到这是一个演示，我并没有遍历所有将固有应用的BootStrap属性，而您必须自己做：

.container > .row > .col > *:not(.parallax-container)  {
 background: rgba(0,0,255,.5);
}

<div class="container">
  <div class="row">
    <div class="col">

      <h1>Things</h1>
     
     // Do not apply here
      <div class="parallax-container break-grid">
        <div class="parallax">
          <span>whatever</span>
        </div>
      </div>
      

      <h2>Stuff</h2>
    </div>
  </div>
</div>

就个人而言，我建议您听取其他所有人的意见，并仅使用层叠样式来构建此东西。 :not是一种出色的工具，但我给您的印象是，您可能会滥用它/过度依赖它，并使自己处于绑定样式方面。

无论如何，祝你好运！

请勿将某些CSS类样式应用于特定的类

1 个答案: