样式集 Style Sets
样式集
样式集是一组命名的样式声明 - 它是作为一个整体应用的选择器和样式定义的系统。
从本质上讲，样式集是作用域样式模块。
样式集声明
样式集声明是一个 at 规则，其语法类似于 @media sections：
@set name [< parent-set-name] {
/* content rules: */
:root { ... }
:root > child { ... }
child { ... }
...
}
应用了样式集的元素（托管该集）是该集的根 - 可以使用 :root 选择器在样式集中进行选择。
SS 中的规则只能应用于主机元素及其子元素。
遗产
样式集支持使用 @set name < parent-set-name {...} 声明表单进行继承。在本例中，名称为 new set 最初从 parent-set-name set 获取所有规则，并且其自己的规则将追加到列表中。
信息
集合中的规则使用正常的 CSS 特异性计算。在不太具体之后应用更具体的规则。继承的规则和自定义规则在这方面没有区别 - 更具体的继承规则可能会覆盖不太具体的自定义规则。
样式集应用程序
可以通过以下方式将集合应用于宿主元素：
作者：CSS
由 HTML
来自 JS/JSX
CSS应用
可以使用 CSS 中的 style-set 属性将样式集附加到特定元素：
selector {
style-set: set-name [url(file.css)];
}
如果提供了 url（file.css），则会按需加载它，并在那里按 set-name 查找集合。
HTML 应用程序
样式集可以使用属性应用于元素 styleset ：
<div styleset="styles.css#set-name">
... content styled by SS ...
</div>
styleset 接受定义集合的 CSS 文件的 url 和锚点（之后 # ），该锚点是该文件中该 @set 文件的名称。
JS/JSX 应用程序
样式集可以使用相同的样式集属性应用于 JSX 模板：
render() {
return <div styleset={__DIR__ + "styles.css#set-name"}>
...
</div>
}__DIR__ + ... 上面的前缀是创建该 CSS 文件的绝对 url 所必需的。它将此.js文件的 url 与“styles.css#set-name”相对 url 组合在一起。
JS/JSX 驻留 CSS 声明
样式集可以在 js 文件中本地定义，而不是外部 CSS 文件。在设计基于单个 JS 文件的组件时，您可能需要这样的局部样式定义。
JS/JSX 驻留样式集使用内置 CSS.set() 函数声明。该函数支持标记模板用法：
const styleSet = CSS.set`
:root { ... }
:root > child { ... }
child { ... }
...
`; 注意这定义了匿名样式集 - 不使用名称和 { } 括号。样式集被编译并存储在 styleSet（或任何其他）JS 变量中。
可以使用相同的 styleset 属性来应用此类代码驻留样式集：
render() {
return <div styleset={styleSet}>
...
</div>
}
从外部覆盖样式集规则
样式集的规则应用于其他规则之上。要覆盖样式集中定义的属性，请在常规样式规则中使用 !important ：
<style>
@set TestSet {
:root {
color:red;
background:gold;
}
}
div {
style-set: TestSet;
color:green !important; /* #1 */
background:red; /* #2 */
}
规则 #1 将更改颜色，#2 不会更改此处的背景：
<body>
<div>This should be green text on gold background</div>
</body>