江苏龙网

  1. 主页 > 生活百科 > >

层叠样式表 CSS新特性@layer( 二 )

层叠样式表

重新使用级联层名称时层顺序保持不变的使@layer 语法变得更加方便和严谨 。使用它，可以预先建立图层顺序，然后将所有 CSS 附加到它：
@layer reset;/* 创建第一个级联层 “reset” */@layer base;/* 创建第二个级联层 “base” */@layer theme;/* 创建第三个级联层“theme” */@layer utilities; /* 创建第四个级联层 “utilities” */@layer reset { /* 添加样式至级联层 “reset” */…}@layer theme { /* 添加样式至级联层“theme” */…}@layer base { /* 添加样式至级联层“base” */…}@layer theme { /* 添加样式至级联层“theme” */…}当然你可以用更短的语法来声明级联层，
@layer reset, base, theme, utilities;从上面可以看出，多个级联层被声明时，最后一个级联层的声明会获胜 。像这样，
@import(reset.css) layer(reset); /* 第一个级联层 */@layer base { /* 第二个级联层 */form input {font-size: inherit;}}@layer theme { /*第三个级联层 */input {font-size: 2rem;}}按以往CSS级联来进行分析的话，form input（多层级）的优先级会大于input,但是由于级联层所起的作用，@layer theme的input会取胜 。
级联层嵌套级联层支持嵌套使用，如下：
@layer base { /* 第一个级联层*/p { max-width: 70ch; }}@layer framework { /* 第二个级联层 */@layer base { /* 第二级联层的嵌套子级联层1 */p { margin-block: 0.75em; }}@layer theme { /* 第二级联层的嵌套子级联层2 */p { color: #222; }}}在这个例子中有两个级联外层：
base
framework
该framework层本身也包含两层：
base
theme
如果要将样式附加到嵌套级联层，需要使用以下全名来引用它，
@layer framework {@layer default {p { margin-block: 0.75em; }}@layer theme {p { color: #222; }}}@layer framework.theme {/* 这些样式会被添加到@layer framework层里面的theme层 */blockquote { color: rebeccapurple; }}@media与@layer@media (min-width: 30em) {@layer layout {.title { font-size: x-large; }}}@media (prefers-color-scheme: dark) {@layer theme {.title { color: white; }}}如果第一个@media (min-width: 30em)匹配（基于视口尺寸），则layout级联层层将在图层顺序中排在第一位 。如果只有@media (prefers-color-scheme: dark)匹配，theme则将是第一层 。
如果两者匹配，则图层顺序将为layout, theme 。如果没有匹配，则不定义层 。




推荐阅读


上一篇：红茶怎么存储,祁门红茶泡茶图片

下一篇：前端实现水印的几种方式