使用 css 设置样式的正确方法是什么:而不是使用换行 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;
}
}
}

现在，这些代码导致所有具有"产品"类的DIV都具有绿色背景。

我正在寻找的是，我怎么能不为"滑块包装"容器应用"产品"样式。这意味着，第一页容器的产品不会是绿色的。

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>

Answer 2

您可以改为:not()，仅过滤.page类中的直接子>：

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

https://codepen.io/gc-nomade/pen/YzKJQmv

Answer 3

您可以使用:first-of-type来覆盖样式。

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

<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>

Answer 4

你可以使用它来代替:not

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