Question

我有以下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 下的image和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 运行时间很长，我不想为每一个定义一个新类。

感谢您的帮助。问候。

Answer 1

.pleft img, .pright img {

   //your CSS for image
}

.pleft b, .pright b {

   //your CSS for b element
}

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

Answer 2

您的CSS将如下所示

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

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

Answer 3

我的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 }

希望这有帮助

将CSS应用于<div> </div>中的元素

3 个答案: