Блог

Главная - Вопросы по программированию - Несколько селекторов классов не работают с CSS?

Несколько селекторов классов не работают с CSS?

#html #css

#HTML #css

Вопрос:

Я хочу создать мобильную навигационную панель. Когда на мобильном устройстве (экран <680 пикселей) меню исчезает (скрыто :

     ul.topnav li:not(:nth-child(1)){
        display: none;
    }

И когда я нажимаю на значок выпадающего списка, запускается DropDownMenu(), и он добавляет отзывчивость к имени класса пользовательского интерфейса, а панель навигации отображается вертикально, как показано в коде:

     ul.responsive li {
        display: inline;
        float: none;
    }

Это работает, только если я использую ul.topnav.responsive{} . Почему это не работает с ul.responsive{} ??

 /* ######## Nav bar ######## */
nav ul {
    background-color: #eee;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ul.topnav li {
    list-style: none;
    float: left;
}

ul.topnav li.topnav-right{
    float: right;
}

ul.topnav li a {
    display: block;
    text-decoration: none;
    min-height: 16px;
    text-align: center;
    padding: 14px;
    text-transform: uppercase;
    color: #666;
}

ul.topnav li a:hover{
    background-color: #0080ff;
    color: #fff;
}

ul.topnav li.dropDownIcon {
    display: none;
}

/* ###### Mobile styles ###### */

@media screen and (max-width : 680px) {
    ul.topnav li:not(:nth-child(1)){
        display: none;
    }

    ul.topnav li.dropDownIcon {
        display: block;
        float: right;
    }

    ul.responsive {
        position: relative;
    }

    ul.responsive li {
        display: inline;
        float: none;
    }

    ul.responsive li a {
        display: block;
        text-align: left;
    }    
}  
 <body>
    <nav>
        <ul class="topnav" id="dropdownClick">
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li class="topnav-right"><a href="#singup">Sign Up</a></li>
            <li class="topnav-right"><a href="#signin">Sign In</a></li>
            <li class="dropDownIcon"><a href="#" onclick="dropdownMenu();">amp;#9776;</a></li>
        </ul>
    </nav>

    <script>
        function dropdownMenu() {
            var x = document.getElementById("dropdownClick");

            if(x.className === "topnav"){
                x.className  = " responsive";
            }else {
                x.className = "topnav";
            }
        }

    </script>

</body>

Ответ №1:

Это проблема со спецификацией ваших стилей.

  • Во-первых, вы отключаете все li элементы на мобильном устройстве.
  • Затем, после нажатия на меню, вы хотите отобразить li элементы.

В настоящее время ваши стили имеют конфликтующие порядки, поэтому они используют правило с наивысшей спецификацией.

Это:

 ul.topnav li:not(:nth-child(1)) {
    display: none;
}

Имеет большую спецификацию, чем эта:

 ul.responsive li {
    display: inline;
}

Итак, учитывается первое правило. Когда вы сделали:

 ul.topnav.responsive li {
    display: inline;
}

Это увеличило специфичность на единицу, так что это работает.

Вы можете найти хороший калькулятор специфичности в Интернете.

Если вы хотите повысить свою специфичность, не добавляя другой класс, вы можете дублировать .responsive селектор.

 ul.responsive.responsive li {
    display: inline;
}

Кроме того, пожалуйста, используйте classList.toggle вместо ручного изменения селекторов.

 /* ######## Nav bar ######## */

nav ul {
    background-color: #eee;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ul.topnav li {
    list-style: none;
    float: left;
}

ul.topnav li.topnav-right{
    float: right;
}

ul.topnav li a {
    display: block;
    text-decoration: none;
    min-height: 16px;
    text-align: center;
    padding: 14px;
    text-transform: uppercase;
    color: #666;
}

ul.topnav li a:hover{
    background-color: #0080ff;
    color: #fff;
}

ul.topnav li.dropDownIcon {
    display: none;
}

/* ###### Mobile styles ###### */

@media screen and (max-width : 680px) {
    ul.topnav li:not(:nth-child(1)){
        display: none;
    }

    ul.topnav li.dropDownIcon {
        display: block;
        float: right;
    }

    ul.responsive {
        position: relative;
    }

    ul.responsive.responsive li {
        display: inline;
        float: none;
    }

    ul.responsive li a {
        display: block;
        text-align: left;
    }    
}  
 <body>
    <nav>
        <ul class="topnav" id="dropdownClick">
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li class="topnav-right"><a href="#singup">Sign Up</a></li>
            <li class="topnav-right"><a href="#signin">Sign In</a></li>
            <li class="dropDownIcon"><a href="#" onclick="dropdownMenu();">amp;#9776;</a></li>
        </ul>
    </nav>

    <script>
        function dropdownMenu() {
            document.getElementById("dropdownClick").classList.toggle("responsive");
        }

    </script>

</body>

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

1. опечатка в первой строке: специфика