将近20年,CSS终于在所有现代浏览器实现了原生嵌套语法!!!

简介: 选择任何三角形和正方形这个任务需要选择多个嵌套元素,也称为组选择器。不使用嵌套,现在的CSS有两种方式:

选择任何三角形和正方形

这个任务需要选择多个嵌套元素,也称为组选择器

不使用嵌套,现在的CSS有两种方式:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

或者,使用:is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

使用嵌套,有两种有效的方式:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

或者

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

这两种嵌

套选项在内部都使用了:is()

.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

结果.demo内部只剩下.circle元素:

image.png

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  <div class="sm circle blue"></div>
  <div class="lg circle purple"></div>
  <div class="triangle blue"></div>
  <div class="sm circle pink"></div>
  <div class="square purple"></div>
  <div class="sm triangle purple"></div>
  <div class="sm square pink"></div>
  <div class="sm square purple"></div>
  <div class="sm circle blue"></div>
  <div class="sm circle pink"></div>
  <div class="lg triangle pink"></div>
  <div class="sm square pink"></div>
  <div class="sm square purple"></div>
  <div class="sm circle blue"></div>
  <div class="square pink"></div>
  <div class="sm square pink"></div>
  <div class="sm square purple"></div>
  <div class="sm circle blue"></div>
</div>

选择大三角形和大圆形

这个任务需要使用复合选择器,元素必须同时具有两个类才能被选中。

不使用嵌套,现在的CSS写法:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

或者

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

使用嵌套,有两种有效的方式:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

或者

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

结果,所有大三角形和大圆形在.demo内部被隐藏:

image.png

试试演示

使用复合选择器和嵌套的专业提示

&符号在这里非常有用,因为它明确显示了如何连接嵌套选择器。考虑以下示例:

.demo {
  .lg {
    .triange,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

虽然这是一种有效的嵌套方式,但结果可能不符合您的预期。原因是,如果没有&来指定期望的.lg.triangle, .lg.circle组合,实际结果将是.lg .triangle, .lg .circle后代选择器

在没有&的情况下嵌套类始终会生成后代选择器。使用&符号可以更改结果。

选择除了粉色形状之外的所有形状

这个任务需要使用否定功能伪类,元素不能具有指定的选择器。

不使用嵌套,现在的CSS写法:

.demo :not(.pink) {  opacity: .25;  filter: blur(25px);}

使用嵌套,有两种有效的方式:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

或者

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

结果,所有不是粉色的形状在.demo内部被隐藏:

image.png

div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  <div class="sm circle blue"></div>
  <div class="lg circle purple"></div>
  <div class="triangle blue"></div>
  <div class="sm circle pink"></div>
  <div class="square purple"></div>
  <div class="sm triangle purple"></div>
  <div class="sm square pink"></div>
  <div class="sm square purple"></div>
  <div class="sm circle blue"></div>
  <div class="sm circle pink"></div>
  <div class="lg triangle pink"></div>
  <div class="sm square pink"></div>
  <div class="sm square purple"></div>
  <div class="sm circle blue"></div>
  <div class="square pink"></div>
  <div class="sm square pink"></div>
  <div class="sm square purple"></div>
  <div class="sm circle blue"></div>
</div>

目录
相关文章
|
2月前
|
前端开发
css的语法
【4月更文挑战第12天】css的语法
22 2
|
9天前
|
前端开发
CSS全部标签属性重置语法
每个浏览器默认的属性不同,像谷歌浏览器不设置的话,默认每个元素是有外边距margin的,有的浏览器列表还会带上序号,有的浏览器就没有。
17 6
|
10天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
17 0
|
14天前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
13 0
|
2月前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
25 1
|
2月前
|
前端开发
CSS 语法
【5月更文挑战第3天】CSS 语法。
35 10
|
2月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2月前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
33 0
|
2月前
|
前端开发
CSS的语法是用来定义网页中元素样式的规则集合
【4月更文挑战第6天】CSS的语法是用来定义网页中元素样式的规则集合
27 5
|
2月前
|
前端开发
CSS的常用语法
【4月更文挑战第7天】CSS的常用语法
17 3