紧凑的多个CSS类选择条件用OR [英] Compact multiple CSS Class selection criteria with OR

问题描述

我必须在 h1，h2或h3的悬停上应用一个样式到 .my-icon （第三级元素 - Image）在 .container （第一级元素 - Div）中的（第二级元素 - 标题），以下是代码

I have to apply a style to a class .my-icon (3rd level element- Image) on hover of h1,h2 or h3(2nd level element - heading) that are in a .container (1st level element - Div), following is the code

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

有更简单某些事情

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

}

>

or may be in following way

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

    }

>

推荐答案

这将使用即将推出的 ：matches（） 选择器：

This will be made possible with the upcoming :matches() selector:

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

虽然这在内部实现为：any ）在多个浏览器中，它是用前缀实现的，使它无意义，因为它迫使你进一步膨胀你的代码，以避免规则无法识别的选择器必须使整个规则集无效： p>

While this is currently implemented internally as :any() in multiple browsers, it is implemented with prefixes, rendering it pointless to use as it forces you to bloat your code even further in order to avoid the rule that unrecognized selectors must invalidate the entire ruleset:

/* 
 * 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;
}

同时，如果您无法访问支持嵌套的预处理器

In the meantime, if you do not have access to a preprocessor that supports nesting of rules, and you cannot change your markup, you will need to stick with what you have.

或者，您也可以根据您的选择器的假设来移除部分选择器标记。例如，如果 .myicon 只会出现在 .container> ：matches（h1，h2，h3） ，那么您可能不需要查找：matches（h1，h2，h3） code> - 您只需这样做：

Alternatively, you could also remove parts of your selector based on assumptions of your markup. For example, if .myicon will only ever appear in .container > :matches(h1, h2, h3) anyway, then you may not need to look for :matches(h1, h2, h3) — you can just do this instead:

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

（ * 是为了说明而不是必要的; ：hover 本身就是有效的CSS，就像 .container 和 .myicon 是。）

(The * is for illustration but not necessary; :hover by itself is valid CSS, just as .container and .myicon are.)

这篇关于紧凑的多个CSS类选择条件用OR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！