html - CSS有条件的效果？

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

<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符号进行标识，但我不确定如何在此处使用它，甚至不确定它是否会起作用。

任何帮助总是很感激。谢谢！

最佳答案

复制问题

好的，我试图在this JSFiddle demo中复制您的图像。如果JSFiddle发生故障，则如下所示：

为此，我只使用了4px background-image，而不是在height上使用.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来使带图案的背景与小部件的背景对齐。

由此，我们最终使图像与顶部边框重叠，同时保持在其起始位置：

第三步

第三步是覆盖整个.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。

关于html - CSS有条件的效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12011551/