Question

我想知道，执行此操作的正确语法是什么：

@media only screen and (max-width: 780px){
    .header-toolbar-contact:nth-child(1){
        display: none !important;
    }
    .header-toolbar-contact:nth-child(2){
        display: none !important;
    }
}

我试过这个：

@media only screen and (max-width: 780px){ .header-toolbar-contact:not(.header-toolbar-contact:nth-child(3)){ display: none !important; } }

但似乎没有用。我的问题是：如何在一个声明中使用多个伪类。好像它是“嵌套”的。

Answer 1

逗号将类名分开：

@media only screen and (max-width: 780px){
    .header-toolbar-contact:nth-child(1),
    .header-toolbar-contact:nth-child(2) {
        display: none !important;
    }
}

Css允许多个选择器使用相同的规则和逗号分隔的选择器。您可以根据需要使用多个。

Answer 2

而不是将完整的班级名称传递给:not()，只需传递:nth-child(3)

即可

＆＃13;

.header-toolbar-contact:not(:nth-child(3)) {
  display: none;
}

＆＃13;

<div class="header-toolbar-contact">First</div>
<div class="header-toolbar-contact">Second</div>
<div class="header-toolbar-contact">Third</div>

＆＃13;

多个css伪类

2 个答案: