如何将 css class 添加到导航元素内的元素

Question

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

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

ADDITION/EDIT:

您还可以为 <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

如何将 css class 添加到导航元素内的元素

How to add css class to an element inside nav element

css

nav