css沒有選擇缺少主要元素外的項目

我在我的網站上有組件，但只有當它們不包含在另一個組件中時纔會對其執行操作。css沒有選擇缺少主要元素外的項目

使用CSS選擇器不喜歡

:not(.container) > .box

<body> 
    <main> 
    <div class="container"> 
     <div class="box">kalle</div> 
    </div> 
    <div class="box">palle</div> 
    </main> 
    <div class="box">olle</div> 
</body>

只能找到「帕勒」如果上下文是身體
將找到「帕勒」和「歐萊」如果上下文是HTML

可以有人解釋爲什麼？

http://jsfiddle.net/4guher4u/2/

來源

2015-10-28 HAXEN

'>'表示只選擇直接後代。 'palle'不是身體的直接後代，'olle'根本就不是主體的後代 – user3154108

這是因爲你的body和main元素:not(.container)選擇匹配，因爲它們都不具有「容器」的class。然後有一個直接的.box孩子被選中。

<!-- Not .container --> 
<body> 
    <!-- Not .container --> 
    <main> 
    <!-- .container, ignored 
    <div class="container"> 
     <div class="box">kalle</div> 
    </div> 
    --> 
    <!-- Not .container, is main > .box --> 
    <div class="box">palle</div> 
    </main> 
    <!-- Not .container, is body > .box --> 
    <div class="box">olle</div> 
</body>

來源

2015-10-28 11:04:51

我沒有太多的使用「高級」css選擇器的經驗，但我認爲很奇怪，當上下文是「olle」時不匹配身體。 .box存在並且沒有.container父項。邏輯，這是我要求的，但似乎我也隱式要求與父母.box。我使用更廣泛的上下文來修復它，這在我的用例中是有意義的，但爲了理解。 '>'是否告訴.box應該有父母？我能用另一種方式表達它來完成我的邏輯搜索嗎？ – HAXEN

當您使用$("body").find()您正在搜索的內部正文內容。這意味着身體被排除在搜索之外，並且與:not(.container)選擇器不匹配，然後<div class="box">olle</div>將不匹配not(.container) > .box選擇器，因爲它不在任何元素內。

當您搜索html元素中，有$("html").find()，該:not(.container)選擇對body相匹配，因爲它是html一個孩子，所以<div class="box">olle</div>因爲它是體內:not(.container) > .box選擇相匹配。

來源

2015-10-28 12:33:56

css沒有選擇缺少主要元素外的項目

回答

相關問題