我可以使用什么CSS操作符来添加更多的页面名称?通配符?

我可以使用什么CSS操作符来添加更多的页面名称?通配符?,css,variables,operators,wildcard,Css,Variables,Operators,Wildcard,我需要在“详细信息”之外添加更多的页面名称值。我有什么选择 :host([page=details]) .menu-btn { display: none; } :host(:not([page=details])) .back-btn { display: none; } 我应该补充一点,“page”变量是html文件中的js属性。我在这里提问是因为我甚至不知道在我的谷歌搜索中应该

我需要在“详细信息”之外添加更多的页面名称值。我有什么选择

        :host([page=details]) .menu-btn {
            display: none;
        }
        :host(:not([page=details])) .back-btn {
            display: none;
        }

我应该补充一点,“page”变量是html文件中的js属性。我在这里提问是因为我甚至不知道在我的谷歌搜索中应该使用什么术语

使用
可以设置多个选择器,并充当“and”/“or”运算符,以便您可以指定多个选择器,这些选择器应共享相同的规则:

:host([page=details]), :host([page=details2]), :host([page=details3]) { . . .}
并且,您可以只指定属性本身(无值)以匹配所有仅具有该属性的元素(无论值如何):


谢谢格雷格·麦克马伦给我指路

以下是适用于以“详细信息-”开头的所有页面值的解决方案。(请注意等号前面的垂直管道,并且“details”后面没有尾随连字符。)例如,值包括“details-1”、“details-2”和“details-3”

从技术上讲,在我的例子中,“page”变量不是严格定义的html元素属性。

为什么使用javascript标记??(已删除js标记)
:host([page])
        :host([page|=details]) .menu-btn {
            display: none;
        }

        :host(:not([page|=details])) .back-btn {
            display: none;
        }