我定义了这样一个样式:
.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 {
}
我都试过了,没有任何区别,图像仍然具有这些属性。
如何以最简单的方式做到这一点?
最佳答案
当您像在 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>
关于html - 分配给一个类的图像的组合器是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47378637/