css - jquery mobile : responsive panel, 为什么应用样式？

Question

在 Chrome 开发者工具中，样式类通过 ui-panel-dismiss 应用于第二个 div。为什么？两个 div(s) 都是 body 下的 sibling 。

ui-page-active后面的~是什么意思？

    @media (min-width: 55em) {
        .ui-responsive-panel .ui-panel-dismiss-display-push, 
        .ui-responsive-panel.ui-page-active~.ui-panel-dismiss-display-push {
            display: none;
        }
    }

<div class="ui-page ui-responsive-panel">
    Some Text Here......
</div>
        
<div class="ui-panel-dismiss ui-panel-dismiss-position-left
          ui-panel-dismiss-display-push ui-panel-dismiss-open" style="height: 998px;">
</div>

http://demos.jquerymobile.com/1.4.5/panel-responsive/

对于右边的面板，我添加了相似的样式类，它没有应用。

@media (min-width: 55em) {
    .ui-responsive-panel .ui-panel-dismiss-display-push {
        display: none;
    }
}

Answer 1

你的第二个问题的答案有助于回答你的第一个问题，所以我会按顺序回答。

本例中的 ~ 是 the element1~element2 general sibling combinator并且基本上匹配同一父项下 element1 之前出现的 element2(例如，element1 和 element2 是兄弟)。请注意，根据该链接上的示例，element2 不必紧跟在 element1 之前。

回到第一个问题: 您的 CSS 选择器包含 2 条规则(以逗号分隔)

• 第一个选择器匹配任何具有 .ui-panel-dismiss-display-push 类的是具有 .ui-responsive-panel 类的东西的子级 - 在您的示例中没有匹配项对于这种情况。
• 第二个选择器匹配类为 .ui-panel-dismiss-display-push 的任何东西在类为 .ui-responsive-panel.ui-page-active 的东西之后，其中两者这些元素在同一个父元素下。假设类 ui-page-active 被应用到你的第一个 div，那么这个选择器将匹配你的例子，因为你的第二个 div 有类 .ui-panel-dismiss-display-push 并且在第一个有类的 div 之后.ui-responsive-panel.ui-page-active 和这两个 div 共享 body 作为它们的父级。