html - 分配给一个类的图像的组合器是什么？

Question

我定义了这样一个样式:

.entry-content img, .entry-content img a {
   background-color: #fff;
    padding: 0px;
    -webkit-box-shadow: 5px 5px 20px #d2d2d2;
    box-shadow: 5px 5px 10px #d2d2d2;
    margin-top:20px;
    margin-bottom:30px;
    border-radius:10px;
    border-color:#555;
    border-width:1px;
    border-style:solid;
}

这将使添加到内容区域的所有图像默认具有边框、边框半径、阴影等。

但我希望能够插入没有这些属性的图像。

所以我的想法(我不知道是否有更好的)是创建一个可以隔离它的类。但有一个问题。如果我将一个类分配给一个图像，将它放入一个 div 中，我不确定是否应该这样写

.entry-content img withoutBorder, .entry-content img a withoutBorder {
}

或者喜欢

.entry-content withoutBorder img, .entry-content withoutBorder img a {
}

我都试过了，没有任何区别，图像仍然具有这些属性。

如何以最简单的方式做到这一点？

Answer 1

当您像在 css 中那样排列类和元素时，实际上是在您希望定位/设置样式的 DOM 树中指定它们的顺序 - 例如:

.entry-content a img{
  background-color: #fff;
  padding: 0px;
  -webkit-box-shadow: 5px 5px 20px #d2d2d2;
  box-shadow: 5px 5px 10px #d2d2d2;
  margin-top:20px;
  margin-bottom:30px;
  border-radius:10px;
  border-color:#555;
  border-width:1px;
  border-style:solid;
  min-height:50px;
  min-width:50px;
}

<div class="entry-content">
  <a href="#">
   <img src="">
  </a>
</div>

在 HTML 部分你可以看到:

• img是 a 的 child
• a是 .entry-content 的 child

在 css 部分，我通过显示“inside .entry-content target a and inside a, target img ”来指定相同的内容。换句话说，它指定 DOM 树的顺序并显示哪些是父项，哪些是子项。

添加类时，您必须在其前面加上.。 (一个点)在 css 中定位它。

另请注意，我稍微更改了 HTML，以便 anchor ( <a> ) 围绕 <img>而不是在 img 中设置 anchor 标签。

要更改某些图像的样式，您可能确实需要添加一个类。这可以是这样的:

.entry-content a img{
  background-color: #fff;
  padding: 0px;
  -webkit-box-shadow: 5px 5px 20px #d2d2d2;
  box-shadow: 5px 5px 10px #d2d2d2;
  margin-top:20px;
  margin-bottom:30px;
  border-radius:10px;
  border-color:#555;
  border-width:1px;
  border-style:solid;
  min-height:50px;
  min-width:50px;
}
.entry-content a img.withoutborder{
  border:none;
}

<div class="entry-content">
  <a href="#">
    <img class="withoutborder" src="">
  </a>
</div>