html - 如何使用css根据其他元素的状态设置div中元素的状态

Question

<div class="ms-OverflowSet commandMenu root-236" role="menubar">
    <div class="ms-OverflowSet-item item-237">
        <button type="button" class="ms-Button ms-Button--commandBar commandMenu-item root-239" data-is-focusable="true" tabindex="-1">
            <div class="ms-Button-flexContainer flexContainer-119">
                <i data-icon-name="Edit" class="ms-Button-icon icon-241" role="presentation" aria-hidden="true"></i>
            </div>
        </button>
    </div>
    <div class="ms-OverflowSet-overflowButton overflowButton-238">
        <button type="button" class="ms-Button ms-Button--commandBar commandMenu-overflowitem root-239" aria-label="More" data-is-focusable="true" aria-expanded="false" aria-haspopup="true" tabindex="-1">
            <div class="ms-Button-flexContainer flexContainer-119">
                <i data-icon-name="MoreVertical" class="ms-Button-menuIcon menuIcon-242" role="presentation" aria-hidden="true"></i>
            </div>
        </button>
    </div>
</div>

默认情况下“ms-Button ms-Button--commandBar commandMenu-item root-239”和隐藏的“ms-Button ms-Button--commandBar commandMenu-overflowitem root-239”

如果 .commandMenu-overflowitem aria-expanded 值为 true "true"，我想将它们的状态设置为可见

.commandMenu-overflowitem[aria-expanded="true"]{
    visibility: visible;
    display: flex
}

上面正在设置 commandMenu-overflowitem 的状态

同样，我尝试如下设置 commandMenu-item 的状态，但它不起作用

.commandMenu-overflowitem[aria-expanded="true"] .commandMenu-item{
    visibility: visible;
    display: flex
}

Answer 1

你不能只用 css 做到这一点。你需要JS。这个问题出现在 REACT 问题列表中。与REACT有关吗？

如果是 ReactJs，你会根据第一个 div 在状态中设置一个值，并在第二个 div 中检查这个状态。根据值，您可以显示不同的类。您描述问题的方式有点令人困惑。设置 div 的状态..我假设是根据另一个 div 类更改 div 的类..或者您将保存在状态中的任何值。