如何寫這個：不是「在其他元素」的CSS規則？

下面是HTML佈局如何寫這個：不是「在其他元素」的CSS規則？

<div class="wrap"> 
    <div class="section"> 
     <span class="text">text1</span> 
    </div> 
    <span class="text">text2</span> 
<span class="not-text">don't color me!</span> 
</div>

我試着給一個樣式到所有「文本」跨越這是不是在「節」的div。我想這一點，但它似乎並不奏效

.wrap :not(.section) .text

fiddle

任何幫助，不勝感激！

編輯：這種情況下有幾種解決方法，包括使用>運算符，如「.wrap> .text」，但我想知道如何使：not選擇器工作，以利用它在未來

來源

2013-02-14 skyisred

'.wrap> .text'會的工作，但是這欺騙.. – 2013-02-14 23:04:44

當您使用.wrap :not(.section) .text，這是你告訴一下瀏覽器：

尋找一個元素與類的.text
其生活的元素中不具有一類.section
其生活裏面你的元素如果您在您的標記仔細一看，有一個班的.wrap

一個元素，沒有符合該選擇標準。

在您提供的標記中，我不認爲您可以使用:not()專門選擇那些不是.section的後代的.text元素。

，你可以得到的最接近的是通過使用直接後代選擇，就像這樣：

.wrap > .text

你也可以選擇和風格的.wrap所有.text後代（無論是直接或沒有），然後取消這些樣式對於.section內的任何.text元素，像這樣：

.wrap .text { 
    // your styles here 
} 

.wrap .section .text { 
    // your cancelled styles here 
}

來源

2013-02-14 23:42:33 zakangelle

非常好的解釋！ – cimmanon 2013-02-15 00:00:51

@cimmanon謝謝！我在這個過程中學到了一點自己。 – zakangelle 2013-02-15 00:19:25

這就是我在自己的答案中分解複雜選擇器的方法。幾乎相同的情況的不同解釋可以發現[這裏]（http://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements/7084147#7084147）。簡而言之，在後代選擇器中使用'：not（）'是不可靠的。 – BoltClock 2013-02-15 07:41:38

你或許可以使用：

.wrap > span 
.wrap > *:not(div) 
.wrap > *:not(.section)

來源

2013-02-14 23:09:58

.wrap> *：沒有（.section僞）是你真正需要的 http://jsfiddle.net/4zns2/ 33/ – 2013-02-14 23:30:31

我的意思是他們是獨立的東西，不是一次全部。他們都會用提供的HTML代碼做同樣的事情。 – 2013-02-14 23:31:48

最佳選項給出CSS的約束寫一個規則的所有文字，然後覆蓋他們回到上一頁爲.section內的人創造價值。所以

.wrap .text { 
    // the styles you want 
} 

.wrap .section .text { 
    // styles undoing the styles above... depending on what the styles are it may not always be possible 

}

來源

2013-02-15 00:01:16 wheresrhys

如何寫這個：不是「在其他元素」的CSS規則？

回答

相關問題