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）

ADDITION / EDIT：

您还可以为<nav>元素中的图片设置规则：

nav img { border: solid blue 1px };

Answer 2

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

    <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

Answer 3

问题肯定在css优先级。尝试使用下一个选择器访问您的图像（其优先级高于上面提到的。）

SetEnvIfNoCase Request_URI ".*" DOCACHE=YES

<If "%{ENV:DOCACHE} == 'YES'">

    Header set CUSTOMCACHE "CUSTOM CACHE VALUE"

</If>

如何将css类添加到nav元素中的元素

3 个答案: