CSS条件效应？

Question

在模板中设置以下代码，以便在每次插入新的侧边栏窗口小部件时显示。 （它显示每个新小部件）

<div class="sidebox-top"></div>
<div class="sidebox">
   <div class="widgets">
      <div class="textwidget">
      [WIDGET CONTENT]
      </div>
   </div>
</div>

以上显示以下CSS：

.sidebox-top {
    background-image: url("/images/top-border-side.gif");
    background-position: center top;
    background-repeat: no-repeat;
    height: 4px;
}
.sidebox {
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
    margin-bottom: 14px;
    padding: 10px 18px 5px;
}

结果如下：

这适用于大多数使用的小部件。但是，我希望上面的图像显示在侧边栏中，没有侧边框 - 顶部蓝线或边框。我知道有一种方法可以使用某些CSS符号在使用＆gt;之前或之后进行识别。符号，我只是不确定如何在这里使用它，或者它是否会起作用。

任何帮助总是受到赞赏。谢谢！

Answer 1

复制问题

好的，我试图在this JSFiddle demo中复制您的图片。如果JSFiddle关闭，这就是这样：

为此而不是在background-image上使用height和4px .sidebox-top，我只使用了4px border-top。虽然不是相同的复制，但它实现了相同的基本效果。

隐藏.sidebox-top元素

第1步

首先，我们需要定位.textwidget分隔符中包含的第一个子项，仅，如果它是img。我们不希望在此之后将此样式应用于任何其他img元素，如果img不是容器中的第一个元素，我们也不想应用样式。为此，我们可以使用：

.textwidget img:first-child { ... }

第2步

下一步是让我们的图片顶部填充和负顶部边距等于.sidebox的顶部填充和.sidebox-top的高度之和。然后，我们希望为图像提供与窗口小部件背景颜色相同的背景：*

.textwidget img:first-child {
    background: #fff;
    padding-top:14px;
    margin-top: -14px;
}

* 注意：这假设您的窗口小部件的背景与窗口小部件容器的背景相同，并且背景为纯色。如果不是，您需要使用background-position来对齐图案背景和小部件的背景。

由此，我们最终将图像与顶部边框重叠，同时保持与开始时相同的位置：

第3步

第三步是覆盖整个.sidebox-top。要做到这一点，我们需要给我们选择的img左右填充和负左右边距等于.sidebox左右填充的总和及其边界宽度：

.textwidget img:first-child {
    ... /* Styling from Step 2 */

    padding-left: 18px;
    padding-right: 18px;
    margin-left: -19px;
    margin-right: -19px;
}

第4步

第3步确实涵盖了整个.sidebox-top，但它也覆盖了.sidebox的边界。为此，我们需要为选定的img添加相同的边框，并减少img上的左右填充以实现此目的：

.textwidget img:first-child {
    ... /* Styling from Step 2 */

    padding-left: 17px;
    padding-right: 17px;

    ... /* Margins from Step 3 */

    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}

最后一步

最后一步是向我们的img添加顶部边框以完成窗口小部件的边框。与步骤4一样，为此，我们需要减小顶部填充的大小以允许此边框：

.textwidget img:first-child {
    ... /* Styling from previous steps */

    padding-top: 13px;
    border-top: 1px solid #D9D9D9;
}

Final JSFiddle demo