CSS子元素如何影响父元素样式？

哈，说到CSS和DOM操作，本质上是个技术活。
我们来谈谈吧。
在 CSS 中，如果子元素想要反向影响父元素的样式，这实际上是非常独特的。

首先，你必须知道CSS继承是单向的，即从父级到子级。
子元素又不能直接影响父元素。
然而，拯救国家的方法有多种。

例如，第一种方法是使用新的 :has() 伪类选择器。
这是CSS4 中添加的，相当先进。
它可以根据父元素中是否存在特定的子元素来选择父元素，从而可以间接修改样式。
例如，如果父div中有一个类为“active”的子元素，则父div的背景颜色可以更改为黄色。

这种方法的优点是，是纯CSS操作，不需要JavaScript。
但它也有缺点，那就是兼容性问题。
目前只有Chrome1 05 、Firefox1 2 1 、Safari1 5 .4 等新浏览器支持该功能，因此必须使用@supports来检查兼容性。

我们来谈谈第二种方法，即使用JavaScript或jQuery来操作DOM。
该方法没有兼容性问题，所有浏览器都可以使用。
但是，您必须编写 JavaScript 代码，这增加了项目的复杂性。
此外，动态修改可能会导致页面重绘或回流，从而影响性能。

那么我们必须澄清一些常见的误解。
例如，有些人认为 CSS 继承机制可能会反向工作，但事实并非如此。
子元素不能直接修改父元素的样式。
另外，jQuery的parent()方法不是CSS选择器而是JavaScript方法，与CSS无关。

最后，还有一种使用 CSS 变量的替代方法。
通过子元素修改CSS变量，然后在父元素中引用该变量，实现样式绑定。

简而言之，如果您的项目兼容性允许，更喜欢使用 :has() 选择器。
如果您需要与旧版浏览器兼容，请使用 JavaScript 来操作 DOM。
不要陷入误区，根据项目需求选择解决方案，并记得检查兼容性。

CSS perspective属性：父级元素和子级元素设置的区别在哪里？

说实话，放在父母和孩子层面，视角的效果是截然不同的。
我想了很久。

父母考虑观点 例如，如果您有一个名为 .scene 的父级，则可以在此处设置透视图。
所有子元素（包括 .cube）在旋转时都具有固定的视角，并且在 6 00 像素的距离处可见。
看看那个立方体。
旋转时，六个面没有扭曲，看起来仍然一样。
就像站在舞台边看戏一样。
无论演员如何移动，你都从一个地方观看。

孩子们提出观点 相反，您可以将透视图直接添加到 .cube。
在这种情况下，视角以立方体本身为中心。
由于立方体旋转时透视效果是局部的，因此六个面可能会变形，导致一些面拉伸，另一些面扭曲。
这就像通过放大镜看到一个正方形绕着圆圈旋转一样。
正方形本质上就是正方形，但通过放大镜观察时会发生变化。

为什么会发生这种情况？最重要的是 Transform-style:preserve-3 d 和 Perspective。
当使用更高层次的视角时，Preserve-3 d可以确保立方体在三维空间中正确旋转。
当您将透视移动到立方体时，透视只能看到立方体本身。
它与 Preserve-3 D 不同步，弄乱了 3 D 空间关系。

调试特别容易。
为子元素添加边框，例如 .cube__face + border。
使用父透视时，边框不会变形。
从孩子的角度来看，边界是扭曲的，因此您可以直观地看到差异。

当时我不明白为什么这个效果会起作用，但尝试了一段时间后，我发现父母改变了视角，以防止立方体旋转混乱。
添加透视到较低的级别以查看转换效果。
添加边框使转换尤其清晰。