所以我有以下样式组合,可以按我的意愿工作。如果按钮处于 focus
或 active
状态,则按钮的 visibility: visible;
.new-comment-button {
margin: 0.25em 0 0.5em 0;
float: right;
visibility: hidden;
}
.new-comment-input:focus + .new-comment-button,
.new-comment-button:focus {
visibility: visible;
}
.new-comment-input:active + .new-comment-button,
.new-comment-button:active {
visibility: visible;
}
我想做的是将最后两种样式组合成一个,当输入处于 active
或 focus
状态时可以使用。但是,我尝试的每个组合都失败了,例如:
.new-comment-input:focus + .new-comment-button,
.new-comment-input:active + .new-comment-button,
.new-comment-button:focus {
visibility: visible;
}
我也试过:
.new-comment-input:focus:active + .new-comment-button,
.new-comment-button:focus {
visibility: visible;
}
都没用。我可以坚持使用单独的样式,但我很好奇是否有一种方法可以将它们正确组合并考虑 input
的两种状态?
最佳答案
你唯一能做的就是删除无关的 { visibility: visible; }
并将其替换为逗号:
.new-comment-input:focus + .new-comment-button,
.new-comment-button:focus,
.new-comment-input:active + .new-comment-button,
.new-comment-button:active {
visibility: visible;
}
您有四个选择器,分为两个规则集,但您不能将它们中的任何一个组合起来,因此您必须简单地将它们的两组合并为一个。 :focus:active
表示同时存在这两种状态 (AND),而不是其中任何一种 (OR),因此您不能以这种方式组合它们。
关于css - 如何将多个选择器与相邻兄弟选择器组合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35053030/