html - 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