Question

是否可以在没有JS的情况下执行此操作，我将如何编写它？如果是.content-pto.active，那么我想将span.ico更改为动画....

<div id="pto-button">
    <div>
        <div class="title-pto">
          <div>content<span class="ico"></span></div>
        </div>
        <div class="content-pto active">
            <p>more content</p>
        </div>
    </div>
</div>

Answer 1

不幸的是，单独使用CSS的最接近的是＆＃34;兄弟选择器＆＃34;，但它仅适用于前向顺序。例如，如果您的标记看起来像：

<div id="pto-button">
    <div>
        <div class="content-pto active">
            <p>more content</p>
        </div>
        <div class="title-pto">
          <div>content<span class="ico"></span></div>
        </div>
    </div>
</div>

在这种情况下你可以编写像

这样的CSS

.content-pto.active ~ .title-pto .ico {
}

或

.content-pto.active + .title-pto .ico {
}

取决于您是否需要任何后续元素，或仅分别是相邻元素。但反过来是不可能的！它已被社区建议，但出于性能原因拒绝将其添加到CSS规范中，正如我所理解的那样。

基于另一个元素类的CSS样式？

1 个答案: