用sass选择器嵌套的时候，如何表示直接子元素

Posted 2023-03-13

使用CSS的子元素选择器与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择子元素如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果希望选择只作为h1元素子元素的 strong 元素，可以这样写：

h1 > strong color:red;

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个h1中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

扩展资料：

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。

Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

参考资料来源：百度百科-SASs

参考技术A 使用CSS的子元素选择器与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 选择子元素如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。 例如，如果希望选择只作为h1元素子元素的 strong 元素，可以这样写： h1 > strong color:red; 这个规则会把第一 参考技术B .father
& > .son
color: red;