将 CSS 规则应用于里面的所有元素？

Question

我有一些像这样的元素

<div class="t-widget t-window">

Your code goes here

</div>

对于该元素和我想应用此规则的所有元素

-webkit-box-sizing : content-box;
       -moz-box-sizing : content-box;
            box-sizing : content-box;

这有多容易？

Answer 1

您可以使用以下 CSS 设置来实现：

CSS：

.t-widget, .t-widget ~ * { /* The ~ * selects all elements following it */
    color: red; /* Added just for illustration */
    -webkit-box-sizing : content-box;
    -moz-box-sizing : content-box;
    -o-box-sizing : content-box;
    box-sizing : content-box;
}

HTML：

<div>Your code goes here</div> <!-- Style will not be applied to this -->
<div class="t-widget t-window">Your code goes here</div> <!-- Style will be applied from this point on -->
<div>Your code goes here</div>
<div>Your code goes here</div>
<div>Your code goes here</div>

演示

编辑：刚刚看到您想要的子元素评论。为此，请使用以下 CSS。

.t-widget, .t-widget * {
    color: red;
    -webkit-box-sizing : content-box;
    -moz-box-sizing : content-box;
    -o-box-sizing : content-box;
    box-sizing : content-box;
}

更新演示

在这里您可以查看CSS3 选择器的完整列表。