У меня есть элемент <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>
1
Coding Duchess 29 Дек 2015 в 00:25

3 ответа

Лучший ответ

Вероятно, есть другое правило для изображений внутри навигации, которое предотвращает границу. Но вы можете добавить !important в свое правило:

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

Это должно переопределить другое правило (если в нем также нет !important)

ДОБАВЛЕНИЕ / РЕДАКТИРОВАНИЕ:

Вы также можете установить правило для изображений внутри элемента <nav>:

nav img { border: solid blue 1px };
1
Johannes 28 Дек 2015 в 21:34

Проблема определенно в приоритете css. Попробуйте получить доступ к вашим изображениям с помощью следующего селектора (который имеет более высокий приоритет, чем указано выше).

nav div img.img-cls, nav img.img-cls
{
     border: solid blue 1px;
}
0
Andriy Ivaneyko 28 Дек 2015 в 21:39

Попробуйте это, все ваши дочерние изображения будут иметь границу

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

Сообщите мне, если решите свою проблему.

Вот пример Пример

1
Rolly 28 Дек 2015 в 21:49