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”中的任何元素。

你想要的选择器：页脚.textwidget

参考资料：selectors

Answer 2

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

使用子代组合子(空格)而不是子组合子(大于符号)。

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

您也可以去掉!important。在最好的时候，它们是一个可怕的大锤，在footer .textwidget比.textwidget更具体之前，这里并不需要它们。

Answer 3

在这个示例中，给出了一个.textwidget类的div不是footer尝试的直接子级：

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