CSS子选择器 - 在两个不同的div中操作相同的div类

Question

我的目标是通过我的 div 类元素“textwidget”的 css 控制位置和边距属性，该元素出现在我网站的不同位置。

这是我的结构：

<header class="site-header">
<hgroup class="full-container">

<div id="header-sidebar" >
    <aside id="text-2" class="widget widget_text">          
        <div class="textwidget">    ...     </div>
    </aside>

</div>

</hgroup>
</header>


<footer class="site-footer">

<div id="footer-widgets" class="full-container">
    <aside id="text-5" class="widget widget_text">
        <div class="textwidget">     ....      </div>
    </aside>
</div>

</footer>

这就是我在 CSS 中尝试过的，但没有成功：

.textwidget{
position: absolute;
right: 0;
margin-top: 30px;
text-align: right;
}

footer > .textwidget{
position: absolute !important;
left: 0 !important;
text-align: left !important;
}

Answer 1

footer > .textwidget{

仅针对作为页脚直接后代的“textwidget”类的元素，即：

<footer class="site-footer">
    <div class="textwidget">
        This div will be targeted
    </div>
</footer>

删除 > 它将针对页脚中类 'textwidget' 的 任何 元素。

你想要的选择器：footer .textwidget

---

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

.textwidget 是footer 的曾孙，而不是孩子。

使用后代组合器（空格）而不是子组合器（大于号）。

footer .textwidget {
  position: absolute;
  left: 0;
  text-align: left;
}

您也可以摆脱!importants。在最好的情况下，它们是一个可怕的大锤，在footer .textwidget 比.textwidget 更具体之前，这里不需要它们。

Answer 3

在示例中，您给出的类为 .textwidget 的 div 不是 footer 的直接子代：

footer aside > .textwidget{
position: absolute !important;
left: 0 !important;
text-align: left !important;
}