存在较远的子类时，CSS可以检测并移动HTML元素吗？

2024-05-11 • 问答

尝试根据子CSS选择器（动态添加/删除）的存在在屏幕上移动屏幕外面板。

我在做什么错？ TIA

场景：

带有CSS规则的屏幕外面板.details监视子选择器.finished-loading。如果存在子选择器（通过最终用户交互动态加载），则面板的CSS规则变为true，并且.details面板在屏幕上滑动。

示例：：

CSS：

body .details {margin-right: -300px;} /* .details panel is closed */
body.show-details .details .finished-loading {margin-right: 0;} /* conditions on opening the .details panel */

HTML：

<body class=".show-details">
<div class="wrapper">
  <div class="details">
    <!-- any number of nested elements -->
    <div>
      <div>
        <p>Dynamically loaded content</p>
        <p class="finished-loading">Dynamically loaded content</p> <!-- .finished-loading triggers CSS rule -->
      </div>
   </div>
  </div>
</div>
</body>

这么多错误...

添加类以控制细节div或正文的边距
不要使用边距，请使用transform-在html引擎执行定位/ layoutig之后对其进行处理，如果您使用转场，则会产生更好的动画。
类名在任何位置都不能有点

<body>
<div class="wrapper">
  <div class="details finished-loading">
    <!-- any number of nested elements -->
    <div>
      <div>
        <p>Dynamically loaded content</p>
        <p>Dynamically loaded content</p>
      </div>
   </div>
  </div>
</div>
</body>

.details {transition: transform .5s ease;}
.details:not(.finished-loading) {transform: translateX(300px);}

该示例使用否定伪类（：not），这样代码会短一些。您也可以这样，更容易理解，但需要更多代码：

.details {transition: transform .5s ease;transform: translateX(300px);}
.details.finished-loading {transform: translateX(0);}

编辑：

一些说明，为什么需要将类添加到详细信息div或正文中：

当前无法通过子约束选择元素（：empty除外）。

存在较远的子类时，CSS可以检测并移动HTML元素吗？

Ian701 回答：存在较远的子类时，CSS可以检测并移动HTML元素吗？

大家都在问