1

我有以下 HTML 代码，

<div class="part">
    <div class="pleft">
        <img src="images/1.jpg">
        <b>Image 1</b>
    </div>
    <div class="pright">
        <img src="images/2.jpg">
        <b>Image 2</b>
    </div>
</div>

如何为pleft和pright下的图像和 b 元素应用 CSS 样式。

现在我正在按照以下方式进行操作，

<div class="part">
    <div class="pleft">
        <img class="pl1" src="images/1.jpg">
        <b class="pl2">Image 1</b>
    </div>
    <div class="pright">
        <img class="pr1" src="images/2.jpg">
        <b class="pr2">Image 2</b>
    </div>
</div>

我想知道是否有任何捷径可以做到这一点。div pright和pleft运行时间很长，我不想为它们中的每一个定义一个新类。

感谢你的帮助。问候。

4

3 回答 3

0 
.pleft img, .pright img {

   //your CSS for image
}

.pleft b, .pright b {

   //your CSS for b element
}

使用它，您无需添加任何其他类。

于 2013-04-25T09:01:09.740 回答
0

你的 CSS 看起来像这样

.pleft {//your css}
.pleft img {//your css}
.pleft b {//your css}

.pright{//your css}
.pright img{//your css}
.pright b{//your css}
于 2013-04-25T09:06:51.077 回答
0

我的 CSS 不是最强的，但是，我假设您在问如何定义 pleft 和 pleft 而不必重新定义两次。

所以这就是我将如何做到的。

.pleft,.pright{ ADD ALL COMMON CSS HERE}
.pleft{ Difference }
.pright{ Difference }

您可以将其应用于子元素

.pleft .pr1,.pright .pr1{ADD ALL COMMON CSS HERE}
.pleft .pr1{ Difference }
.pright .pr1{ Difference }

或者你可以做类似的事情

.pleft img,.pright img{ADD ALL COMMON CSS HERE}
.pleft img{ Difference }
.pright img{ Difference }

希望这可以帮助

于 2013-04-25T09:10:08.850 回答