jquery mobile：響應式面板，爲什麼樣式適用？

從Chrome開發人員工具中，將樣式類應用於ui-panel-dismiss的第二個div。爲什麼？兩個div都是身體下的兄弟姐妹。jquery mobile：響應式面板，爲什麼樣式適用？

char ~什麼含義？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; 
    } 
}

來源

2016-09-28 Dave

第二個問題的答案有助於回答你的第一個問題，所以我會按照這個順序回答他們。

在這種情況下，該值爲the element1~element2 general sibling combinator，並且基本上與在同一父元素下的元素1之前的元素2的出現次數相匹配（例如，元素1和元素2是同胞）。請注意，元素2不必緊跟在element1之後，就像該鏈接上的示例一樣。

回到你的第一個問題：你的CSS選擇器包含2條規則（由逗號分隔），帶班的.ui用面板辭退顯示推說是

中的第一選擇是匹配什麼一個孩子的東西與類.ui響應面板 - 在你的例子中沒有這種情況下的匹配。

第二個選擇器與類.ui-panel-dismiss-display-push相匹配，在之後。類爲.ui-responsive-panel.ui-page-active，其中這兩個元素都在同一父母。假設類的ui-page-active被應用到你的第一個div，那麼這個選擇器將與你的例子匹配，因爲你的第二個div有class .ui-panel-dismiss-display-push，並且在第一個div之後， .ui-responsive-panel.ui-page-active並且這兩個div共享主體作爲其父體。

來源

2016-09-28 04:14:22 LawrieM

jquery mobile：響應式面板，爲什麼樣式適用？

回答

相關問題