如何将CSS类添加到导航元素内的元素

Question

我的页面上有一个<nav>元素，其中包含几个<div>元素，其中一个div包含多个图像。我想一个边框添加到图像，所以我添加了一个类的CSS文件：

.img-cls 
{ 
    border: solid blue 1px; 
} 

现在，如果我添加class="img-cls"到页面上的任何图像，它增加了一个边框，但是如果我添加相同到<nav>里面的任何图像，没有任何变化。任何人都可以帮我解决这个问题吗？

下面是我的html：

<form id="form1" runat="server" method="post"> 
    <nav class="navbar navbar-default navbar-fixed-top" 
     role="navigation"> 

     <div id="divContainer" class="container"> 
      <div class="navbar-header"> 

      </div> 
      <div id="navbarContent" class="collapse navbar-collapse"> 

      </div> 

      <div> 
       <div class="input-group"> 
        <span class="input-group-addon">ID</span> 
        <input type="text" id="txtID" class="form-control" 
          placeholder="Enter your id here" /> 
       </div> 
       <br /> 
       <button type="submit" class="btn btn-primary btn-lg btn-block"> 
        Submit Data 
       </button> 
       <br /> 
        <img src="images/DOS.png" class="img-cls"/> 
        <img src="images/SR.png" class="img-cls" /> 
        <img src="images/RFI.jpg" class="img-cls" /> 
      </div> 


     </div> 
    </nav> 

</form> 

Answer 1

有可能是内部的资产净值，以防止边界图像其他规则。但是，你可以添加!important到您的规则：

.img-cls 
{ 
    border: solid blue 1px !important; 
} 

这应该覆盖其它规则（除非它也有!important）

添加/编辑：

您还可以设置一个规则您<nav>元素内的图像：

nav img { border: solid blue 1px }; 

Answer 2

在CSS优先级肯定是问题。 尝试用下一个选择来访问图像（具有比上述更加优先。）

nav div img.img-cls, nav img.img-cls 
{ 
    border: solid blue 1px; 
} 

Answer 3

试试这个，你的所有子图像将有边框

<style> 
     .bordered_images img 
     { 
      border: solid blue 1px; 
     } 

     nav .border{ 
     border: solid red 5px; 
     } 
     nav .bigborder{ 
     border: solid purple 10px; 
     } 
    </style> 


      <div class="bordered_images"> 
      <img class="" src="http://lorempixel.com/150/100" alt=""> 
      <img class="" src="http://lorempixel.com/150/100" alt=""> 
      <div class="anotherdiv"> 
       <img class="" src="http://lorempixel.com/150/100" alt=""> 

       <div class="onemore"> 
       <img class="" src="http://lorempixel.com/150/100" alt=""> 
       </div> 
      </div> 
      </div> 


    <nav> 
     <img src="http://lorempixel.com/150/100" alt="" class="border"> 
     <img src="http://lorempixel.com/150/100" alt="" class=""> 
     <div> 
     <img src="http://lorempixel.com/150/100" alt="" class="bigborder"> 
     <img src="http://lorempixel.com/150/100" alt="" class=""> 
     </div> 
    </nav> 



    <style> 
     .img-cls { 
     border: solid red 5px; 

     } 

    </style> 

    <h1>THE FORM</h1> 
    <form id="form1" runat="server" method="post"> 
     <nav class="navbar navbar-default navbar-fixed-top" 
      role="navigation"> 

      <div id="divContainer" class="container"> 
       <div class="navbar-header"> 

       </div> 
       <div id="navbarContent" class="collapse navbar-collapse"> 

       </div> 

       <div> 
        <div class="input-group"> 
         <span class="input-group-addon">ID</span> 
         <input type="text" id="txtID" class="form-control" 
          placeholder="Enter your id here" /> 
        </div> 
        <br /> 
        <button type="submit" class="btn btn-primary btn-lg btn-block"> 
         Submit Data 
        </button> 
        <br /> 
         <img src="http://lorempixel.com/150/100" class="img-cls"/> 
         <img src="http://lorempixel.com/150/100" class="img-cls" /> 
         <img src="http://lorempixel.com/150/100" class="img-cls" /> 
       </div> 


      </div> 
     </nav> 

    </form> 

让我知道如果你解决你的问题。

下面的例子 Example