Question

我必须在.my-icon（第2级元素 - 标题）的悬停中将样式应用于类h1,h2 or h3（第3级元素 - 图像）.container（第1级） level element - Div），以下是代码

.container > h1:hover > .my-icon,
.container > h2:hover > .my-icon,
.container > h3:hover > .my-icon
 {
    display:inline;
}

有没有更简单（或紧凑）的方式呢？像

这样的东西

.container > (h1|h2|h3):hover > .myicon {

}

或可能以下列方式

.container > (h1:hover|h2:hover|h3:hover) > .myicon {

    }

或任何其他紧凑的方式？

Answer 1

即将推出的:matches()选择器可以实现这一目标：

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

虽然目前在多个浏览器中将其作为:any()内部实现，但它使用前缀实现，使其无意使用，因为它会强制您进一步膨胀代码以避免{{3 }}：

/* 
 * Why do this when you can just compact your three selectors
 * into a single rule as you're already doing?
 */

.container > :-moz-any(h1, h2, h3):hover > .myicon {
    display: inline;
}

.container > :-webkit-any(h1, h2, h3):hover > .myicon {
    display: inline;
}

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

与此同时，如果您无法访问支持嵌套规则的预处理器，并且无法更改标记，则需要坚持使用所拥有的内容。

或者，您也可以根据标记的假设删除部分选择器。例如，如果.myicon只会出现在.container > :matches(h1, h2, h3) 中，那么您可能不需要查找:matches(h1, h2, h3) - 您可以这样做：< / p>

.container > *:hover > .myicon {
    display: inline;
}

（*仅供参考，但不是必需的; :hover本身就是有效的CSS，就像.container和.myicon一样。）

使用OR压缩多个CSS类选择标准

1 个答案: