css组合选择器详解

说到复合选择器，这是您需要讨论的一个 CSS 小技巧。
这个东西在我做网页设计的时候给了我很大的帮助。

坦率地说，聚合选择器用于选择同时满足多个条件的元素。
例如，如果您想在 div 中定义 p 标记，或在菜单项中定义链接，则此位可能很有用。

我记得有一次，当我设计一个网页时，我必须定义所有嵌套在 div 中的 p 元素。
当时，我使用了内置的 div p 选择器，一旦打开它，效果就立即显现出来。
简单吧？
例如，如果要选择所有直接子级，例如列表的直接子级链接，则可以使用 li > a。
这比一一写类名或标识符更方便。

还有一个相邻的选择器。
例如，如果要选择紧随 h2 标题之后的所有段落，请使用 h2 + p。
该+符号是相邻的分隔符。

不过，虽然这个组选择器很容易使用，但你也应该注意优先级问题。
一般来说，石斑鱼的优先级从右到左依次递减。
换句话说，最靠近右侧的选择器具有更高的优先级。

例如，如果您输入 div p a，则此选择器将优先考虑 div 中标记 p 中的标记，而不是 div 中的所有标记。

但是，如果这组选择器使用得太频繁，它会让代码看起来有点混乱，并降低可读性和可维护性。
因此，尽可能不要使用它，或者使用更简单的类选择器或标识符。

最后，请记住了解汇编器的优先级规则，这可以帮助您避免选择器冲突。
例如，如果先键入 div p a，然后键入 div a，则 div a 选择器将覆盖 div p a，因为它具有更高的优先级。

总之，组选择器固然好，但是你一定要用得当，不要让它成为你的绊脚石。

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

嘿嘿，说的是CSS的perspective属性，其实在parent和child上设置的时候，效果是大不一样的。
比如2 02 2 年我接手某个城市的一个项目时，我当时就无法理解父子设置的区别。

父元素定义视角。
透视参考点就像站在一个固定的地方看演员在舞台上表演。
当时我很困惑，但后来意识到，当子元素旋转或变换时，它们将从这个统一的观看者距离（例如6 00像素）进行渲染，保持原始形状的完整性。
例如，当旋转一个立方体时，所有六个面都将出现在预期的三维空间关系中，而不会失真。
就好像你在一个固定的位置观看场景，演员的动作都是从同一个角度看到的。

我们来谈谈设置子元素的视角。
这个透视参考点就像拿着镜头仔细观察一个旋转的正方形。
当我尝试时，当立方体旋转时，由于透视扭曲，它的面表现出意想不到的拉伸或压缩效果。
就像通过镜头观察一样，镜头的曲率会导致正方形在旋转时发生扭曲。

主要区别主要是由于与transform-style:preserve-3 d的交互。
当父元素设置透视时，preserve-3 d可以保证子元素在三维空间中正确渲染；而子元素的透视会破坏这种空间关系，因为透视效果仅限于子元素本身。
此外，观察者距离是统一的。
父参数提供整体观看距离，子元素在变换过程中共享相同的视角；子框架为每个子元素提供了独立的视角，破坏了三维连贯性。

后来在实践中发现，如果需要子元素在旋转时保持形状，则需要在父元素上设置透视。
如果想研究透视变形，可以给子元素设置透视，通过添加border属性来观察表面位置和形状的变化。
调试的技巧是为子元素添加边框，以便您可以更清楚地比较不同设置下的透视差异。

如何用 CSS 选择特定父级类的孙子元素并排除最后一个？

CSS 选择特定父类的孙子类并排除最后一个，使用 .parent > div: not(:last-child) .grandchild 。
例如， .parent > div:nth-child(2 n) .grandchild 选择第二个子 div 中的孙子，但不选择最后一个。

与 .parent > .child 结构依赖项匹配非 div 子元素。
兼容性注意：不支持IE8 及以下版本。

称一下体重。

使用 CSS 为父级 Section 元素应用奇偶逻辑

嘿，我们来谈谈 CSS 中的 :nth-child 选择器。
这个家伙在实现奇偶式逻辑时特别有用。
顺便说一下，我第一次遇到这个选择器是几年前的一个项目。
当时，我碰巧正在设计一个复杂的布局并发现了这个宝石。

我们先来说第一种方法，这是一种不依赖类名的实现方法。
这个技巧很简单粗暴：只需使用section:nth-child(odd)和section:nth-child(even)来查找最外面的
元素。
我记得当时这样做过：
css 部分：第 n 个子级（奇数）{ 背景：红色； } 部分：第 n 个子级（偶数）{ 背景：浅绿色； } 节节{ 背景：不！重要的;
这里的逻辑是： odd 在奇数位置选择
并将其背景设置为红色； Even 选择偶数位置的
并将其设置为浅绿色背景。
然后通过嵌套的选择器部分清除内部
的背景颜色。
!important 确保此样式可以覆盖继承的样式。

第二种方法是基于类名的实现。
如果 HTML 结构比较复杂或者想要更精确地控制样式，可以在最外层的
中添加类名，例如“parent-section”。
因此，可以使用类名精确控制样式：
css .parent-section:nth-child(奇数){ 背景：红色； } .父节：第n个子节（偶数）{ 背景：浅绿色； } 节.父节{ 背景：不！重要的;
这里， .parent-section:nth-child(odd) 和 .parent-section:nth-child(even) 只会作用于那些类名为“parent-section”的
元素。

顺便说一句，使用此选择器时需要记住一些事项。
首先，请谨慎使用 !important。
如果这个单品使用得太频繁，保持风格就会变得很头疼。
其次，:nth-child 的定位是基于该元素在父元素中的位置，因此如果父元素中存在其他元素类型，则可能会出现样式不匹配的情况。
最后，类名的语义也很重要。
最好使用描述性的类名以使代码更易于阅读。

总之，这两种实现方式各有优点。
不依赖名字的人类适合简单的结构，依赖类名的适合复杂的结构。
主要是根据项目的需要来选择，让代码具有可维护性，不要过多依赖!important。