除了div和所有div之外的所有元素的樣式

Question

 $('#main div').not('#2 > #3').each(function() { $(this).css('background-color', 'blue'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="1"> <div>Some text in paragraph 1</div> <div>Some text in paragraph 1</div> </div><br> <div id="2"> <div id="3">Some text in paragraph 2</div> <div>Some text in paragraph 1</div> </div><br> <div id="3"> <div>Some text in paragraph 3</div> <div>Some text in paragraph 1</div> </div><br> </div> 

我希望css不適用於id=2的div的嵌套div。 有什么建議？

Answer 1

你必須以這種方式排除div＃2：

$('#main > div').not('#2').each(function() {
    $(this).css('background-color', 'blue');
});

或者更簡單：

$('#main > div').not('#2').css('background-color', 'blue');

純CSS：

#main > div:not(#2) {
    background-color: blue;
}

Answer 2

A）如果你的意思只是#3 ：

background-color默認值是transparent 。 你沒有為#3設置background-color ，因為它變得transparent （在這種情況下，你看到blue ，因為#2有background-color:blue ）。

你的選擇器是正確的只是插入div的初始值：

div {
  background-color:#fff;
}

演示

B）如果你的意思是#2和他的孩子：

• 不要用數字啟動ID（我將#2更改為#a2 ）

用這個：

#main>div:not(#a2) {
    background-color: blue!important;
}

 #main>div:not(#a2) { background-color: blue!important; } 

 <div id="main"> <div id="1"> <div>Some text in paragraph 1</div> <div>Some text in paragraph 1</div> </div><br> <div id="a2"> <div id="3">Some text in paragraph 2</div> <div>Some text in paragraph 1</div> </div><br> <div id="3"> <div>Some text in paragraph 3</div> <div>Some text in paragraph 1</div> </div><br> </div> 

Answer 3

 $('#main>div').not('#2').each(function() { $(this).css('background-color', 'blue'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="1"> <div>Some text in paragraph 1</div> <div>Some text in paragraph 1</div> </div><br> <div id="2"> <div id="3">Some text in paragraph 2</div> <div>Some text in paragraph 1</div> </div><br> <div id="3"> <div>Some text in paragraph 3</div> <div>Some text in paragraph 1</div> </div><br> </div>