css - 使用 css :not with wrap div 设置样式的正确方法是什么

Question

我遇到的问题可以用代码更好地描述。

我有一些 HTML，如下所示

<div class="page">
  <div class="slider-wrap">
    <div class="products ">
      <div class="product"></div>
      <div class="product"></div>
    </div>
  </div>
</div>

<div class="page">
  <div class="products">
      <div class="product"></div>
      <div class="product"></div>
  </div>
</div>

CSS 代码看起来像这样，

.page {
    clear: both;
    .products {
        .product {
            float: left;
            margin-bottom: 20px;
            width: 200px;
            height: 100px;
            border: 1px solid #ff0000;
            background: green;
        }
    }
}

现在这些代码会导致所有带有“product”类的 DIV 都具有绿色背景。

我正在寻找的是，我怎么能不为“ slider 包装”容器应用“产品”样式。也就是说，第一页容器的产品不会是绿色的。

Answer 1

使用 CSS 选择器 > .什么>所做的是，它仅在它是直接父级 时才调用该 CSS 函数。

所以通过分配 .page > .products ，您应用的 css 规则只有在 .page 时才会生效。是 .products 的直接父级.

.slider-wrap介于 .page 之间和 。 products , 因此该特定部分不会受到影响 .slider-wrap现在是直接父级。

您可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator 阅读更多相关信息

试试这个:

.page {
  clear: both;
}

.page > .products .product {
  float: left;
  margin-bottom: 20px;
  width: 200px;
  height: 100px;
  border: 1px solid #ff0000;
  background: green;
}

<div class="page">
  <div class="slider-wrap">
    <div class="products ">
      <div class="product">1</div>
      <div class="product">1</div>
    </div>
  </div>
</div>

<div class="page">
  <div class="products">
    <div class="product">2</div>
    <div class="product">2</div>
  </div>
</div>