Question

我需要添加更多页面名称值，＆＃34;详细信息＆＃34;。我有什么选择？

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

我应该添加＆＃34;页面＆＃34;变量是我的html文件中的js属性。我在这里问，因为我甚至不知道在Google搜索中使用哪些字词。

Answer 1

谢谢Greg McMullen，指出我有关属性选择器的文档。请查看他对URI的回答。

以下是适用于以＆＃34;详细信息 - ＆＃34;开头的所有页面值的解决方案。（注意等于前面的垂直管道，＆＃34之后没有后面的连字符;详细信息＆＃34;。）例如，值包括，＆＃34; details-1＆＃34;，＆＃34; details-2＆＃34 ;和＆＃34;详情-3＆＃34;。

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

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

从技术上讲，就我而言，＆＃34;页面＆＃34;变量不是html元素属性，在严格定义中。

Answer 2

, CSS "combinator" 可让您设置多个选择器并充当＆＃34;和＆＃34; /＆＃34;或＆＃34;运算符，以便您可以指定几个应该共享相同规则的选择器：

:host([page=details]), :host([page=details2]), :host([page=details3]) { . . .}

并且，您可以指定属性本身（无值）以匹配仅具有该属性的所有元素（无论值如何）：

:host([page])

我可以使用哪些CSS运算符来添加更多页面名称？通配符？

2 个答案: