在一个WordPress插件(自己创建的)中,我想定位一些WooCommerce分类图片...但是有些奇怪的事情发生了。
每个分类框大致定义如下:
<div class="edu-cat-item">
<a href="/someurl/"><img src="some-image.jpg></a>
<a href="/someurl/">Title of the cat</a>
</div>
在CSS中,盒子被设置为向左浮动...
.edu-cat-item {
box-sizing:border-box;
width: 175px;
float: left;
padding:10px;
}
edu-cat-item img {
border-width:2px;
border-style:solid;
}
.edu-cat-item a {
text-align:center;
margin-left:auto;
margin-right:auto;
}
而且 -并不令人惊讶- 它起作用了... 然而!
客户希望所选类别具有橙色边框。
因此,在PHP代码中,将额外的类添加到一个特定的项目中... HTML变为:
<div class="edu-cat-item edu-sub-select">
<a href="/someurl/"><img src="some-image.jpg></a>
<a href="/someurl/">Title of the cat</a>
</div>
同时CSS增加了一个冒号:
.edu-sub-select img {
border-color: #ff9900!important;
border-style: solid;
border-width: 2px;
}
现在奇怪的事情发生了...当有多行时,第二行会在所选的类别后面'缩进'一个位置...我很想发布图片,但我需要 '声望10' 才能这样做...
不过我愿意通过邮件分享它们。