Question

我有以下html：

<div class="m-card-with-icon">
   <div class="top bg-green">
      <img class="icon" src="images/img1.png"/>
      <h3>Title1</h3>
  </div>
  <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius rutrum aliquet.</p>

</div>

我试图将一些css应用于图像。

当我尝试

时

.m-card-with-icon {
min-height: 244px;
text-align: left;
background-color: #fafafa;
color: #848484;
cursor: pointer;
display: block;
position: relative;


   .top {
        min-height: 100px;
        line-height: 60px;
        padding: 20px 180px 20px 40px;
        text-transform: capitalize; 
        display: table;
        width: 100.5%;


        img.icon {
            position: absolute;
            right: 25px;
            top: 25px;
            width: 140px;
            height: 140px;
            background-color: #fff;
            border-radius: 100%;
            padding: 10px;
            display: table-cell;
            vertical-align: middle;
        }


   }

}

我应用于img.icon的任何样式都没有显示 - 图像保持左对齐。

我是如何嵌套css的？

Answer 1

可能你想要这个：

（我们不使用嵌套。相反，你可以通过在子节点之前放置父元素来“模拟”嵌套：.m-card-with-icon .top）。

.m-card-with-icon {
    min-height: 244px;
    text-align: left;
    background-color: #fafafa;
    color: #848484;
    cursor: pointer;
    display: block;
    position: relative;
}

.m-card-with-icon .top {
    min-height: 100px;
    line-height: 60px;
    padding: 20px 180px 20px 40px;
    text-transform: capitalize; 
    display: table;
    width: 100.5%;
}

.m-card-with-icon .top img.icon {
    position: absolute;
    right: 25px;
    top: 25px;
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 100%;
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
}

Answer 2

我认为你不能使用css进行嵌套，而是使用scss或sass或更少。如果你使用scss那么它将成为

.m-card-with-icon {
  min-height: 244px;
  text-align: left;
  background-color: #fafafa;
  color: #848484;
  cursor: pointer;
  display: block;
  position: relative;

   .top {
    min-height: 100px;
    line-height: 60px;
    padding: 20px 180px 20px 40px;
    text-transform: capitalize; 
    display: table;
    width: 100.5%;

      .icon {
        position: absolute;
        right: 25px;
        top: 25px;
        width: 140px;
        height: 140px;
        background-color: #fff;
        border-radius: 100%;
        padding: 10px;
        display: table-cell;
        vertical-align: middle;
      }
   }
 }

Answer 3

另一方面，如果您可以控制HTML，最好使用SMACSS或BEM之类的内容。

除了嵌套之外，您还会发现，如果您将CSS的范围用于每个特定节点使用一个唯一的类。如果您使用名称前缀方法，则可以保持您的类名组织。

例如，您可以定位.m-card-with-icon top {}

而不是.m-card-with-icon-top {}

嵌套可能会产生复杂的specificity规则和性能问题，您可能会发现平面CSS可能会使您的CSS更加面向对象和模块化。

在css

3 个答案: