Проблема с приоритетностью в scss. Как ее решить?

Question

Столкнулся с проблемой. Прописал код для header в scss. Нас тут интересует селектор .menu__sub-list с медиазапросом.

.wrapper {
   min-height: 100%;
   .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
      background-color: violet;
      .header__container {
         max-width: 1200px;
         margin: 0px auto;
         display: flex;
         padding: 0 30px;
         align-items: center;
         justify-content: space-between;
         min-height: 70px;
         .header__logo {
            border-radius: 50%;
            background-color: #fff;
            position: relative;
            z-index: 5;
            width: 40px;
            height: 40px;
         }
         .header__menu {
            .menu__icon {
            }
            .menu__body {
               .menu__list {
                  & li{
                     position: relative;
                     margin: 0px 0px 0px 20px;
                  }
                  & li:hover{
                     text-decoration: underline;
                  }
                  @media (min-width: 767px) {
                     display: flex;
                     align-items: center;
                     & > li {
                        padding: 10px 0;
                     }
                  }
                  .menu__link {
                     color: #fff;
                     font-size: 18px;
                  }
                  .menu__sub-list {
                     position: absolute;
                     top: 100%;
                     right: 0;
                     background-color: black;
                     padding: 15px;
                     min-width: 200px;
                     @media (min-width: 767px) {
                        transform: translate(0px, 10%);
                        opacity: 0;
                        visibility: hidden;
                        transition: 0.3s;
                        pointer-events: none;
                     }
                     & li {
                        margin-bottom: 10px;
                     }
                     & li:last-child {
                        margin-bottom: 0px;
                     }
                     .menu__sub-link {
                        color: #fff;
                        &:hover{
                           text-decoration: underline;
                        }
                     }
                  }
               }
            }
         }
      }
   }
}

Скопировал весь scss файл, чтобы показать вложенность, то бишь еще раз вот этот фрагмент:

@media (min-width: 767px) {
                        transform: translate(0px, 10%);
                        opacity: 0;
                        visibility: hidden;
                        transition: 0.3s;
                        pointer-events: none;
                     }

Проблема в том, что при попытке перезаписать этот код при наведении мышью с помощью :hover это не работает:

body._pc{
   .menu__list>li{
      &:hover{
         .menu__sub-list{
            opacity: 1;
            visibility: visible;
            transform: translate(0px, 0px);
            pointer-events: all;
         }
      }
   }
}

Я так понял, что проблема связана с приоритетностью, потому что если добавить !important, все будет работать. Но это похоже на костыли и вообще неудобно. Как можно решить проблему? Дополню полным html кодом:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="scss/np.css">
</head>
<body>
   <div class="wrapper">
      <header class="header">
         <div class="header__container">
            <a href="" class="header__logo">
            </a>
            <div class="header__menu menu">
               <div class="menu__icon">
                  <span></span>
               </div>
               <nav class="menu__body">
                  <ul class="menu__list">
                     <li><a href="" class="menu__link">Раздел №1</a></li>
                     <li><a href="" class="menu__link">Раздел №2</a></li>
                     <li><a href="" class="menu__link">Раздел №3</a></li>
                     <li>
                        <a href="" class="menu__link">Страница №1</a>
                        <ul class="menu__sub-list">
                           <li>
                              <a href="" class="menu__sub-link">Раздел страницы №1</a>
                           </li>
                           <li>
                              <a href="" class="menu__sub-link">Раздел страницы №2</a>
                           </li>
                           <li> 
                              <a href="" class="menu__sub-link">Раздел страницы №3</a>
                           </li>
                        </ul>
                     </li>
                  </ul>
               </nav>
            </div>
         </div>
      </header>
   </div>
</body>
</html>

Answer 1

Вопрос решен. Проблема заключается в самом css. То бишь приоритетность будет выше у того значения, которое имеет больше селекторов, например:

.wrapper .page .page__section-3 {
  background-color: black;
}
.wrapper .page__section-3 {
  background-color: white;
}

Выведется черный цвет, не смотря на то, что приоритетность должна быть выше у белого, так как он внизу. Как я уже сказал, это связано с тем, что черный цвет имеет больше селекторов, а значит приоритетность его будет выше.

БЛОГ НА HUSL

Проблема с приоритетностью в scss. Как ее решить?

Ответы (1 шт):