用于未知标记的 CSS 选择器

Question

我希望在intro-content-detalhes内的所有<img>中应用一些CSS样式。但是图像可能在 N <p> 或 <span> 或 <div> 内。无论选择器应该到达那里并应用样式。

下面是一个显示层次结构的代码示例：

https://jsfiddle.net/es21q6r2/

<div class="intro">
    <table class="intro-container-consulta" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <table class="intro-content-consulta" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td class="intro-content-detalhes">
                                    <span readonly="true" textmode="MultiLine" style="display:inline-block;border-width:0px;width:100%;"><div class="ExternalClass24F5146CDC884387BF8C4A509ABE9CC2"><div></div>
                                        <div>
                                        </div>
                                        <p>Item title</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="" class="ct-active">​</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <div style="text-align:left">Item details</div>
                                        <div>
                                        </div>
                                        <p></p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <ol>
                                        <li><div style="text-align:left">Example #1: <span style="color:rgb(255, 0, 0)">A, B, C</span></div></li>
                                        <li><div style="text-align:left">AA</div></li>
                                        <li><div style="text-align:left">BB</div></li>
                                        <li><div style="text-align:left">CC</div></li>
                                        </ol>
                                        <div>
                                        </div>
                                        <div><br></div>
                                        <div style="text-align:center">
                                        <img src="https://s1.yimg.com/bt/api/res/1.2/mQAfNGBLFnjCvmN4ThWysQ--/YXBwaWQ9eW5ld3NfbGVnbztxPTc1O3c9NjAw/https://s.yimg.com/dh/ap/default/141103/logo2.png" alt=""></div>
                                        <div>
                                        </div>
                                        <p></p></div>
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

感谢您对此的任何帮助

Answer 1

您正在使用子选择器，>它仅在元素是另一个元素的子元素时才选择该元素。您只需要所有图像，因此请将其删除。规则.intro .intro-content-consulta img说选择所有元素的后代，这些图像具有类intro-content-consulta是类intro的后代：

.intro .intro-content-consulta img {
  padding: 5px;
  border: 1px black solid
}

<div class="intro">
  <table class="intro-container-consulta" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td>
          <table class="intro-content-consulta" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td class="intro-content-detalhes">
                  <span readonly="true" textmode="MultiLine" style="display:inline-block;border-width:0px;width:100%;"><div class="ExternalClass24F5146CDC884387BF8C4A509ABE9CC2"><div></div>
                                        <div>
                                        </div>
                                        <p>Item title</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"><img src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s100-c-k-no-rj-c0xffffff/photo.jpg" alt="" class="ct-active">​</p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <div style="text-align:left">Item details</div>
                                        <div>
                                        </div>
                                        <p></p>
                                        <div>
                                        </div>
                                        <p style="text-align:center"></p>
                                        <div>
                                        </div>
                                        <ol>
                                        <li><div style="text-align:left">Example #1: <span style="color:rgb(255, 0, 0)">A, B, C</span>
</div>
</li>
<li>
  <div style="text-align:left">AA</div>
</li>
<li>
  <div style="text-align:left">BB</div>
</li>
<li>
  <div style="text-align:left">CC</div>
</li>
</ol>
<div>
</div>
<div>
  <br>
</div>
<div style="text-align:center">
  <img src="https://s1.yimg.com/bt/api/res/1.2/mQAfNGBLFnjCvmN4ThWysQ--/YXBwaWQ9eW5ld3NfbGVnbztxPTc1O3c9NjAw/https://s.yimg.com/dh/ap/default/141103/logo2.png" alt="">
</div>
<div>
</div>
<p></p>
</div>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>