通常(後に記述したcssが優先される)
hoge1
hoge2
#box01 .hoge {
color: red;
}
#box01 .hoge {
color: blue;
}
@layer構文で後に宣言されたlayerが優先される
hoge1
hoge2
@layer layer2, layer1;
@layer layer1 {
#box02 .hoge {
color: red;
}
}
@layer layer2 {
#box02 .hoge {
color: blue;
}
}
暗黙的な外縁レイヤーがもっとも優先される
hoge1
hoge2
#box03 .hoge {
color: green; /* 暗黙的な外縁レイヤー */
}
@layer layer4, layer3;
@layer layer3 {
#box03 .hoge {
color: red;
}
}
@layer layer4 {
#box03 .hoge {
color: blue;
}
}