选择表格内和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>

并更改div

中的tr标记

  .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>

Answer 2

您可以使用

.this img {
  outline: 1px solid red;
}

为该特定类中的所有图像设置样式。

Answer 3

如果您尝试将css添加到css中的所有图像，请按以下方式调用：

.this {

*这里的css样式*

}