Question

在Chrome开发者工具中，样式类将应用于ui-panel-dismiss的第二个div。为什么？两个div都是身下的兄弟姐妹。

~之后char ui-page-active的含义是什么？

＆＃13;

    @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;
        }
    }

＆＃13;

<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>

＆＃13;

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作为其父级。

jquery mobile：响应式面板，为什么风格应用？

1 个答案: