给定此选择器:
body[class*="page-node-add-"][class~="page-node-edit"] {background:red;}
它将匹配一个正文,该正文的类包含 page-node-add- 的子字符串,而类恰好是 page-node-edit
我想说匹配第一个或第二个(但不能同时匹配)。可能吗?
使用逗号的问题:
如果我有一个长选择器,例如:
body[class*="page-node-add-"] form.node-form > .field-type-field-collection > table > thead tr th, body[class~="page-node-edit"] form.node-form > .field-type-field-collection > table > thead tr th {...}
我原本以为CSS3可以解决这个问题,但是我想到的是:
body([class*="page-node-add-"]):or([class~="page-node-edit"]) {background:red;}
谢谢
您需要使用逗号将它们分开:
body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}
…是除了逗号以外,您无法做其他任何事情。也许可以使用Selectors3进行补救,但不幸的是该规范另有说明。选择器4只能纠正这种情况,因为它是直到最近_才_ 提出来的,或者它 是 提出来的但没有降低到级别3。
在选择器的4级中,您将可以执行以下操作:
body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th {...}
当前,这是在其最初建议的名称:any()(带有前缀:-moz-any()和)下实现的:-webkit- any()。但是:any()鉴于此,在面向公众的CSS中使用毫无意义
:any()
:-moz-any()
:-webkit- any()
2.由于处理前缀选择器的方式,您必须复制规则集,这不仅违背了:matches()选择器的预期目的,而且使情况更糟:
:matches()
body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th {...} body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th {...}
换句话说,在实现将自身更新为标准化之前:matches(),没有其他可行的解决方案(使用预处理器为您生成重复的选择器除外)。