html - 选择表格内和 div 内的图像

Question

如何在不选择上方图片的情况下选择下方图片 (@div class="this")，以便使用 CSS 设置样式？

<table>
    <tr>
        <td><a href="../index.html"><img src="../home.png"></a></td> <!-- GO BACK TO HOMEPAGE -->
        <td><a href="########"><img src="../artist.png"></a></td> <!-- GO TO ARTIST -->
        <td><img src="../portfolio.png"></td>
        <td><img src="../contact.png"></td>
    </tr>
    <tr>
        <td colspan="8"><img src="../logo.png"></td>
    </tr>
    <tr>
        <td colspan="8"><img src="../greenmoralesgraphic.png"></td>
    </tr>
    <tr><div class="this">
        <td><img src="nostalgia.jpg" width="400px" height="400px"></td>
        <td><img src="pwersa.jpg" width="400px" height="400px"></td>
        <td><img src="tag_along.jpg" width="400px" height="400px"></td>
        <td><img src="tweet.jpg" width="400px" height="400px"></td>
        </div>
    </tr>
</table>

Answer 1

使用

.this img{
  border:1px solid #ddd;
}

这将选择 .this 类中的图像。这样应用的样式将仅应用于 .this 类中的图像。该空间称为后代组合器。 Read about descendant combinator here

.this img{
  border:1px solid #f00;
}

<table>
    <tr>
        <td><a href="../index.html"><img src="../home.png"></a></td> <!-- GO BACK TO HOMEPAGE -->
        <td><a href="########"><img src="../artist.png"></a></td> <!-- GO TO ARTIST -->
        <td><img src="../portfolio.png"></td>
        <td><img src="../contact.png"></td>
    </tr>
    <tr>
        <td colspan="8"><img src="../logo.png"></td>
    </tr>
    <tr>
        <td colspan="8"><img src="../greenmoralesgraphic.png"></td>
    </tr>
    <tr>
        <td>
          <div class="this"><img src="nostalgia.jpg" width="400px" height="400px">
          <img src="pwersa.jpg" width="400px" height="400px">
          <img src="tag_along.jpg" width="400px" height="400px">
          <img src="tweet.jpg" width="400px" height="400px">
         </div>
       </td>
       <td> </td>
        <td></td>
        <td></td>
        
    </tr>
</table>

并更改 tr 内的 div 标签

  .this img{
      border:1px solid #f00;
    }

 
 

    <table>
        <tr>
            <td><a href="../index.html"><img src="../home.png"></a></td> <!-- GO BACK TO HOMEPAGE -->
            <td><a href="########"><img src="../artist.png"></a></td> <!-- GO TO ARTIST -->
            <td><img src="../portfolio.png"></td>
            <td><img src="../contact.png"></td>
        </tr>
        <tr>
            <td colspan="8"><img src="../logo.png"></td>
        </tr>
        <tr>
            <td colspan="8"><img src="../greenmoralesgraphic.png"></td>
        </tr>
        <tr>
            <td>
              <div class="this">
                <img src="nostalgia.jpg" width="400px" height="400px"> 
             </div>
           </td>
           <td> 
             <div class="this">
                <img src="pwersa.jpg" width="400px" height="400px">
             </div>    
             
           </td>
            <td>
             <div class="this">
               <img src="tag_along.jpg" width="400px" height="400px">
             </div>
            </td>
            <td>
              <div class="this">
                   <img src="tweet.jpg" width="400px" height="400px">
              </div>
            </td>
            
        </tr>
    </table>