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>

删除＆gt;它将在页脚中定位类'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;
}

你也可以摆脱!important。它们在最好的时候是一个可怕的大锤，在footer .textwidget比.textwidget更具体之前不需要它。

Answer 3

在示例中，您为某个.textwidget类提供的div不是footer尝试的直接子项：

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

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

3 个答案: