CSS嵌套语法

马黑黑 发表于 2024-5-30 20:15

本帖最后由马黑黑于 2024-5-30 20:19 编辑 <style>
.test {
position: relative;
padding-top: 50px;
font: normal 20px/26px sans-serif;
color: blue;

& span {
 color: plum;
 &:hover {
 color: red;
 }
}

&::after {
 position: absolute;
 content: '春思';
 font-weight: bold;
 left: 40px;
 top: 0;
}
}
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
先看以下代码：
 
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">.test {</cl-cd>
<cl-cd data-idx="3">    position: relative;</cl-cd>
<cl-cd data-idx="4">    padding-top: 50px;</cl-cd>
<cl-cd data-idx="5">    font: normal 20px/26px sans-serif;</cl-cd>
<cl-cd data-idx="6">    color: blue;</cl-cd>
<cl-cd data-idx="7"> </cl-cd>
<cl-cd data-idx="8">    & span {</cl-cd>
<cl-cd data-idx="9">        color: plum;</cl-cd>
<cl-cd data-idx="10">        &:hover {</cl-cd>
<cl-cd data-idx="11">            color: red;</cl-cd>
<cl-cd data-idx="12">        }</cl-cd>
<cl-cd data-idx="13">    }</cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15">    &::after {</cl-cd>
<cl-cd data-idx="16">        position: absolute;</cl-cd>
<cl-cd data-idx="17">        content: '春思';</cl-cd>
<cl-cd data-idx="18">        font-weight: bold;</cl-cd>
<cl-cd data-idx="19">        left: 40px;</cl-cd>
<cl-cd data-idx="20">        top: 0;</cl-cd>
<cl-cd data-idx="21">    }</cl-cd>
<cl-cd data-idx="22">}</cl-cd>
<cl-cd data-idx="23"></style></cl-cd>
<cl-cd data-idx="24"> </cl-cd>
<cl-cd data-idx="25"><div class="test"></cl-cd>
<cl-cd data-idx="26">    燕草如碧丝，<br></cl-cd>
<cl-cd data-idx="27">    秦桑低绿枝。<br></cl-cd>
<cl-cd data-idx="28">    当君怀归日，<br></cl-cd>
<cl-cd data-idx="29">    是妾<span>断肠</span>时。<br></cl-cd>
<cl-cd data-idx="30">    春风不相识，<br></cl-cd>
<cl-cd data-idx="31">    何事入<span>罗帏</span>？</cl-cd>
<cl-cd data-idx="32"></div></cl-cd>
</div>
 
这组代码的CSS部分，.test 选择器首先定义自己的几个属性，position、padding-top、font 和 color，然后，它嵌套了一个 span 选择器，用 “& 选择器名称” 这样的结构定义其下的选择器，这里是 span 标签，等价于 “.testspan” 选择器；该嵌套选择器定义了前景色并且嵌套一个 :hover 伪类，:hover 伪类也是用 “&” 来连接，不同的是不能有空格，必须写成 “&:hover”（伪元素也一样的写法）。.test 选择器还嵌套了一个伪元素，“&::after”，它是 .test 的伪元素，与 “& span” 是并列关系、同属于 .test 的第一代子元素。
 
CSS嵌套语法不是现在才提出来，不过浏览器的支持直到最近才实现。具体地说，Chromium内核112（安卓114）、Safari16.5、Opara98、Firefox117才开始支持CSS嵌套语法。
 
以下是效果演示，依赖于浏览器的支持：
 
<div class="test">
燕草如碧丝， 
秦桑低绿枝。 
当君怀归日， 
是妾断肠时。 
春风不相识， 
何事入罗帏？
</div>

马黑黑 发表于 2024-5-30 20:20

Opear现在也是用了 Chromium 内核，如是，则需要 Chromium 112 以上的版本才支持 CSS嵌套语法

马黑黑 发表于 2024-5-30 20:23

在此之前，CSS嵌套语法的实现需要JS的支持，有很多这类框架，它们都称为 CSS in JS，能够很好地实现 CSS 编程，可以使用自定义函数、有更好的逻辑判断能力、可以使用迭代语句。

南无月 发表于 2024-5-30 20:45

这个颜色居然可以单字独设。。
嵌套很有优势啊。。
个性鲜明。。{:4_187:}

南无月 发表于 2024-5-30 20:50

&:这个符号第一次看到，嵌套使用
这里套了两个，
一个是独立设置了单字颜色，
一个是独立设置标题加粗和位置 {:4_199:}

南无月 发表于 2024-5-30 20:51

老师让我们看到代码可真是有无限可能。。。{:4_199:}

马黑黑 发表于 2024-5-30 21:18

南无月发表于 2024-5-30 20:51
老师让我们看到代码可真是有无限可能。。。

这个目前还不适合用于生产：浏览器如果不更新停留在以前早些时候的版本，它是显示不出正常效果的

马黑黑 发表于 2024-5-30 21:19

南无月发表于 2024-5-30 20:50
&:这个符号第一次看到，嵌套使用
这里套了两个，
一个是独立设置了单字颜色，

嵌套语法应该是很诱人的

马黑黑 发表于 2024-5-30 21:19

南无月发表于 2024-5-30 20:45
这个颜色居然可以单字独设。。
嵌套很有优势啊。。
个性鲜明。。

主要是逻辑清晰

南无月 发表于 2024-5-30 21:41

马黑黑发表于 2024-5-30 21:18
这个目前还不适合用于生产：浏览器如果不更新停留在以前早些时候的版本，它是显示不出正常效果的

老瓶子装不了新酒{:4_173:}

南无月 发表于 2024-5-30 21:42

马黑黑发表于 2024-5-30 21:19
嵌套语法应该是很诱人的

个性鲜明啊。。。独特啊，有更多灵活的组合呀，有无限的可能呀

南无月 发表于 2024-5-30 21:42

马黑黑发表于 2024-5-30 21:19
主要是逻辑清晰

被你讲的清晰。。
{:4_199:}

马黑黑 发表于 2024-5-30 21:42

南无月发表于 2024-5-30 21:42
被你讲的清晰。。

人家本来清晰

马黑黑 发表于 2024-5-30 21:43

南无月发表于 2024-5-30 21:42
个性鲜明啊。。。独特啊，有更多灵活的组合呀，有无限的可能呀

这是起步。将来，有循环语句，条件语句，自定义函数

马黑黑 发表于 2024-5-30 21:43

南无月发表于 2024-5-30 21:41
老瓶子装不了新酒

装了可以不认账

南无月 发表于 2024-5-30 21:46

马黑黑发表于 2024-5-30 21:42
人家本来清晰

它长得跟洋葱一样一层一层的，不一定看懂
你剥开还给摆好了。。
还给说明白了。。{:4_170:}

南无月 发表于 2024-5-30 21:46

马黑黑发表于 2024-5-30 21:43
这是起步。将来，有循环语句，条件语句，自定义函数

语句还好些，看到函数我只想躲你身后面{:4_170:}

南无月 发表于 2024-5-30 21:47

马黑黑发表于 2024-5-30 21:43
装了可以不认账

装做不认识。。浏览器新旧差别这么大么？还好一般的没啥差。。

红影发表于 2024-5-30 21:49

这个在一首诗里，黑黑把各种嵌套都弄进去了，对比着看效果特别明显{:4_199:}

马黑黑 发表于 2024-5-30 21:49

红影发表于 2024-5-30 21:49
这个在一首诗里，黑黑把各种嵌套都弄进去了，对比着看效果特别明显

这是测试而已

页: [1] 2 3 4

花潮论坛's Archiver

CSS嵌套语法