Блог

Главная - Вопросы по программированию - Использование CSS для воздействия на праправнука

Использование CSS для воздействия на праправнука

#html #css

#HTML #css

Вопрос:

У меня есть панель навигации, которая будет прилипать к верхней части страницы при скольжении, когда это происходит, она добавляет два класса в div, «вставленный», это работает отлично, но то, что я хотел бы сделать, это

 <div class="navbar navbar-expand-sm sticked in">
    <div class="container">
        <div class="header-logo">
             <a href="http://localhost/2021/site/">
                <img src="logo.svg" class="custom-logo">
             </a>
         </div>
     </div>
</div>

После того, как он застрянет, я хотел бы уменьшить img (logo.svg), поэтому я ищу правильные селекторы, если «вставлено» на моей панели навигации, измените высоту .header-logo img

например:

 .sticked.in > div > a > .header-logo img{
    height: 20px;
}

очевидно, что это неправильные селекторы, поэтому я ищу способ перейти по css к изображению заголовка-логотипа, если присутствует «вставлено»

Комментарии:

1. Я не знаю, хорошо ли я понял, чего вы хотите, но разве это не так? .sticked.in img { height: 20px; }

2. это будет работать для всех изображений, вставленных внутри, так что да, ваш ответ правильный, и спасибо, но это может повлиять на любые другие изображения, добавленные в навигационную панель в будущем, например, значки, поэтому было бы неплохо иметь возможность таргетировать .заголовок-логотип, поэтому после тестирования. sticked.in .заголовок-изображение логотипа будет работать, поэтому, пожалуйста, добавьте свой комментарий в качестве ответа, чтобы я мог принять

3. О, кто-то еще добавил, я не думаю, что это того стоит. 🙂

Ответ №1:

Вам не нужен > дочерний селектор. Пример с переключением:

 document.getElementById("toggle-class")
        .addEventListener("click", function() 
{
    document.querySelector(".navbar")
            .classList.toggle("sticked");
}); 
 img {
  height: 50px;
  width: 50px;
  background-color: red;
}

.sticked.in .custom-logo {
  background-color: blue;
} 
 <div class="navbar navbar-expand-sm sticked in">
    <div class="container">
        <div class="header-logo">
             <a href="http://localhost/2021/site/">
                <img class="custom-logo">
             </a>
         </div>
     </div>
</div>

<button id="toggle-class">Toggle</button>

Метки: