0

我的目标是通过我的 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;
}
4

3 回答 3

3 
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

于 2013-11-06T12:18:10.090 回答
2

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

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

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

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

于 2013-11-06T12:13:52.433 回答
2

在示例中，您给 div 的类.textwidget不是footertry 的直接子级：

footer aside > .textwidget{
position: absolute !important;
left: 0 !important;
text-align: left !important;
}
于 2013-11-06T12:13:59.173 回答