移动端 CSS all 属性为何不生效？检查 revert 与 revert-layer 的区别
当移动端网页样式异常时，检查 all 属性是否使用了 revert 或 revert-layer 值，因为这两个值会回退到父级样式而非应用当前规则。
排查 all 属性值导致样式回退的原因
移动端网页中，如果某个元素样式与预期不符，首先应检查该元素的 CSS 规则是否使用了 all: revert 或 all: revert-layer。根据资料，all 属性是一个简写属性，用于重置元素的所有属性，但 unicode-bidi、direction 和 CSS 自定义属性除外。当 all 被设置为 revert 时，如果当前规则属于作者级样式，它会回退到用户级样式，计算值将视为未指定作者级规则。这意味着浏览器会忽略当前 blockquote 规则中的 background-color 和 color 设置，转而继承父元素 body 的样式。同样，all: revert-layer 会回退到前一个级联层，如果没有其他层，则行为与 revert 相同。因此，如果开发者误用了这些关键字，会导致样式意外回退。
在移动端调试时，可以通过浏览器开发者工具查看计算后的样式。如果发现元素的 background-color 是 #F0F0F0 而非 skyblue，且 font-size 为 small 而非 medium，这表明 all 属性生效了。此时应确认 CSS 代码中是否错误地添加了 all: revert 或 all: revert-layer。由于 all 属性会重置除 unicode-bidi、direction 和自定义属性外的所有属性，任何显式设置的值都会被这些关键字覆盖。排查时应重点检查这些关键字是否被误写，或者是否在级联层中错误地应用了回退逻辑。
验证 all 属性不同值对元素显示的影响
为了验证 all 属性的具体行为，可以创建一个测试用例，包含一个 blockquote 元素及其父元素 body。在 body 中设置 font-size 为 small，背景色为 #f0f0f0，颜色为 blue。在 blockquote 中设置 background-color 为 skyblue，color 为 red。然后分别应用 all: initial、all: inherit、all: unset 和 all: revert。根据资料，all: initial 会将元素变为行内元素，背景色透明，字号为 medium，颜色为黑色。all: inherit 会从父元素继承所有属性，包括块级元素、背景色和颜色。all: unset 会根据属性是否默认继承来决定是继承还是初始值，例如背景色变为透明，但字号和颜色继承。all: revert 则会回退到用户级样式，导致元素样式与 body 一致。
在移动端设备或模拟器上运行此测试，观察不同 all 值下的视觉效果。如果应用 all: revert，元素应显示为块级元素，背景色为 #F0F0F0，字号为 small，颜色为 blue。如果应用 all: revert-layer 且没有定义级联层，结果应与 all: revert 相同。通过对比这些结果，可以确认 all 属性的具体作用机制。如果发现元素样式不符合预期，说明 all 属性值可能被错误设置，或者级联层配置存在问题。
确认 all 属性不包含 unicode-bidi 和 direction
在排查移动端样式问题时，还需注意 all 属性的特殊限制。根据资料，all 属性是一个简写属性，但它不会影响 unicode-bidi 和 direction 属性。这意味着即使设置了 all: initial 或 all: revert，元素的文本方向（如从左到右或从右到左）和双向文本格式化属性仍保持原样。例如，如果 body 设置了 direction: rtl，即使 blockquote 应用 all: revert，其文本方向仍会保持为从右到左。因此，在调试移动端布局时，如果发现文本方向异常，应检查是否误用了 all 属性，或者是否需要单独设置 unicode-bidi 和 direction。
为了验证这一限制，可以在测试用例中添加 direction: rtl 到 body 规则，并观察 blockquote 元素的行为。无论 blockquote 如何应用 all 属性，其文本方向应始终与 body 保持一致。如果发现方向发生变化，说明 all 属性可能未正确应用，或者存在其他 CSS 规则覆盖了 direction 属性。此外，CSS 自定义属性也不会被 all 属性重置，因此需要单独管理这些属性。
检查级联层配置与 all 属性的交互
在复杂的移动端项目中，可能会使用级联层来管理样式。此时，all: revert-layer 的行为可能与 all: revert 不同。根据资料，all: revert-layer 会回退到前一个级联层，如果没有其他层，则行为与 revert 相同。因此，如果项目定义了多个级联层，误用 all: revert-layer 可能导致样式回退到错误的层，从而引发异常。例如，如果当前规则在动画层中，而回退到前一个层可能导致样式不一致。排查时应检查级联层的定义顺序，并确认 all 属性值是否与预期一致。
为了验证级联层的影响，可以在 CSS 文件中定义多个级联层，并在不同层中设置不同的样式。然后，在 blockquote 规则中应用 all: revert-layer，观察元素样式是否回退到预期的层。如果发现样式异常，说明级联层配置可能存在问题，或者 all 属性值与级联层逻辑不匹配。此外，由于 all 属性会重置所有属性，级联层的回退行为可能会覆盖其他显式设置的值，因此需要谨慎使用。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。