Question

我有以下选择器：

#elem1:hover,#elem1.clicked{
      ...lots of css here...
}

当屏幕小于800px时，我希望选择器只有#elem1.clicked。

因此，像：

@media only screen and (min-width: 800px){#elem1:hover},#elem1.clicked{
      ...lots of css here...
}

是否可以根据媒体查询执行条件选择器？/

（我正在使用SASS，因此可以接受SASS答案，但不更改HTML）

Answer 1

您可以重置媒体查询中的属性。或者不使用组合选择器内规则不同的那些属性。如果您希望#elem1:hover在800px宽度下不匹配，则需要在单独的规则中对其进行sy。。

示例：

#elem1:hover, #elem1.clicked {
    /* maybe basic styles that always apply */
}


#elem1.clicked {
    /* .clicked styles are always shown */
}

@media only screen and (min-width: 800px){

    #elem1:hover {
        /* styles only above 800px */
    }

}

Answer 2

您可以为＃elem1：hover定义基本样式，然后对＃elem1.clicked应用覆盖，如下所示：

#elem1:hover {

}

@media (min-width: 800px) {
    #elem1.clicked {

    }
}

或者，您可以更具体，并根据具体情况添加样式：

#elem1 {
    /* common style */
}

@media not (min-width: 800px) {
    #elem1:hover {

    }
}

@media (min-width: 800px) {
    #elem1.clicked {

    }
}

基于媒体查询的条件选择器

2 个答案: