组合 CSS 多个伪元素的正确方法是什么？

Question

我根据 Whosebug 的回答为页面创建了代码。它工作得很好，但我想优化它，我不知道，因为我不是程序员。什么是正确的方法？

#black:before {
content: ""; 
position: fixed;
top: 0; 
right: 0; left: 0; bottom: 0; background: none; 
z-index: -2;}

#red:before {
content: ""; 
position: fixed;
top: 0; 
right: 0; left: 0; bottom: 0; background: none; 
z-index: -2;}

 #black:target::before {background: #ACAA92;}
 #red:target::before {background: #ACAA92;}

 #black:hover .text{display:block;} 
 #com:hover .text{display:block;}

Answer 1

所有应该共享相同属性和值的选择器可以简单地用逗号分隔。您可以将它们全部写在一行上，但更喜欢的样式是每行单独放置以提高可读性：

#black:target::before, #red:target::before { background: #ACAA92; }

#black:hover .text,
#com:hover .text {
  display:block;
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors#Groups_of_selectors_on_one_rule

组合 CSS 多个伪元素的正确方法是什么？

What's the right way of combining CSS multiple pseudo-elements?

css

pseudo-element