CSS嵌套类不能直接选择吗？

Question

我必须用offer-img类来格式化一个图像

<section class="offer">
  <div class="container">
    <div class="row">
      <div class="col-2">
        <!-- The image I want to style -->
        <img src="img.png" class="offer-img">
      </div>

      <div class=".."> ... </div>
    </div>
  </div>
</section>

在我的style.css中，当我尝试用

/* somewhere above the hierarchy */
.col-2 img{
    max-width: 100%;
    padding: 50px 0;
    background-size: cover;
}
/* Not working  
.offer-img {
  padding: 40px;
}
*/

/* Works fine */
.col-2 .offer-img {
  padding: 40px;
}

编辑：

• 当我试图直接访问.offer-img时，不会应用我的样式。
• 只有当我将.offer-img更改为.col-2 .offer-img时，它才能工作。
• 为什么.col-2 img的填充会覆盖.offer-img的填充呢？
• .col-2 img比.offer-img更具体吗？

Answer 1

是。您可以直接访问该类，代码没有任何问题。

你在这里看到了CSS特异性的行动

专用性是浏览器决定哪些CSS属性值与元素最相关的方法，因此，它将被应用。特异性是基于由不同类型的CSS选择器组成的匹配规则。

您使用的三个css类：

1. .offer-img：一个类的元素.specific(不太具体)
2. .col-2 img：带有类名.col2的元素中的img元素(更具体)
3. .col-2 .offer-img：在类名为.col2 (最具体的)的元素中具有类名的元素。

如果存在冲突，则将应用元素最特定的样式。

Answer 2

这里有一个错误--您错过了结束引号class="row> --它应该是class="row">，而且代码工作正常，我可以选择您所引用的类，而不存在任何问题&看看您是否正在覆盖样式。

​

.offer-img{
    padding: 50px;
    width: 500px;
}

<section class="offer">
      <div class="container">
           <div class="row">
                   <div class="col-2">  
                       <!-- The image I want to style --> 
                       <img src="https://wallpaperaccess.com/full/193101.jpg
" class="offer-img">
                    </div>

                   <div class=".."> ...  </div>
              </div>
       </div>
</section>

​

Answer 3

检查样式表中是否只有"img“标记可以覆盖这个类。

其他的给予“！重要的”比如

.offer-img {
  padding: 40px !important;
}

CSS中的‘！重要’规则用于向属性/值添加比通常更重要的内容。