CSS & 符号与嵌套选择器：理解预处理器与原生CSS的差异及正确用法

SCSS 和原生 CSS 之间的主要区别在于 & 符号和嵌套。

& 是当前的父选择器，简化了伪类的编写。
例如，&:hover 编译后变为.button:hover。

嵌套选择器在预处理器中缩进编写，并在编译后自动扩展。
例如，.nav.item 编译为 .nav .item。

原生 CSS 需要您手动编写完整的选择器，并且不能直接使用 &。
::after 不能单独存在，它必须遵循一个完整的选择器。

数学按钮的例子非常典型。
SCSS使用&来简化代码，编译后产生三个独立的选择器。

伪元素和伪类必须直接连接到完整选择器。
如果嵌套很深，则逐层展开。

Chrome 1 1 2 实验性地支持原生嵌套，但语法与预处理器不同。
在生产环境中使用SCSS是可靠的。

复杂的项目使用 SCSS 并将变量混合到这些函数中。
对于较小的项目，只需编写原生 CSS 即可。

您需要了解预编译和后编译语法之间的区别。
如果不理解，就很容易犯错误。
亲自看看哪一款适合您。

如何用CSS实现嵌套Div的居中和重叠效果？

我记得有一次，我正在为一个网站设计页面布局，突然需要在一个正方形区域中放置两个重叠的圆形图标。
巨细。
当时我认为这应该很容易，但是当我尝试时，我发现两个圆圈无法居中，并且它们重叠在一个尴尬的位置。
然后我想，我应该使用布局吗？是的，这是一个姿势！首先放置大圆的父容器，然后正确放置小圆。
嗯，事情就是这样。
布局确定后，大圆圈和小圆圈立即叠加在一起。
但是，为什么中心效应仍然很弱呢？我重新考虑并添加了保证金：自动。
这次成功了。
大圆和小圆完全居中且重叠。
说起来，这种放置方式用起来还是很方便的。
如果以后遇到这样的布局问题，也可以很快解决。
但这背后是有深刻道理的，我们必须找机会深入研究。