请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 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;
}
}
</style>
<div class="test">
燕草如碧丝，<br>
秦桑低绿枝。<br>
当君怀归日，<br>
是妾<span>断肠</span>时。<br>
春风不相识，<br>
何事入<span>罗帏</span>？
</div>
这组代码的CSS部分，.test 选择器首先定义自己的几个属性，position、padding-top、font 和 color，然后，它嵌套了一个 span 选择器，用 “& 选择器名称” 这样的结构定义其下的选择器，这里是 span 标签，等价于 “.test span” 选择器；该嵌套选择器定义了前景色并且嵌套一个 :hover 伪类，:hover 伪类也是用 “&” 来连接，不同的是不能有空格，必须写成 “&:hover”（伪元素也一样的写法）。.test 选择器还嵌套了一个伪元素，“&::after”，它是 .test 的伪元素，与 “& span” 是并列关系、同属于 .test 的第一代子元素。
CSS嵌套语法不是现在才提出来，不过浏览器的支持直到最近才实现。具体地说，Chromium内核112（安卓114）、Safari16.5、Opara98、Firefox117才开始支持CSS嵌套语法。
以下是效果演示，依赖于浏览器的支持：
燕草如碧丝，
秦桑低绿枝。
当君怀归日，
是妾断肠时。
春风不相识，
何事入罗帏？
| 
发表于 2024-5-30 20:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-30 20:45
