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

Question

我需要添加更多页面名称值 "details"。我有哪些选择？

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

我应该补充一点，"page" 变量是我的 html 文件中的一个 js 属性。我在这里问是因为我什至不知道在我的 google 搜索中使用什么术语。

Answer 1

, CSS "combinator" 允许您设置多个选择器并充当 "and"/"or" 运算符，因此你可以指定几个应该共享相同规则的选择器：

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

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

:host([page])

Answer 2

谢谢 Greg McMullen 为我指点 the documentation on attribute selectors。

以下是适用于所有以“details-”开头的页面值的解决方案。（注意等号前面的竖线，“details”后面没有尾随连字符。）例如，值包括“details-1”、“details-2”和“details-3”。

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

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

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

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

What CSS operators can I use to add more page names? Wildcards?

css

variables

wildcard

operators