多個CSS選擇器無法與jQuery CSS方法一起使用

Question

我正在嘗試遵循以下代碼，但無法正常工作。 選擇器沒問題（在控制台中，兩個列表項都顯示），但與之相反的是，CSS僅應用於第一個元素。 為什么會這樣呢？

的HTML

<ul>
    <li class="c1">1</li>
    <li class="c2">2</li>
    <li>3</li>
</ul>

腳本

$(document).ready(function(){
    var a=$(".c1");
    var b=$(".c2");
    console.log(a, b);
    $(b, a).css("font-size", "20px");
});

Answer 1

如果您閱讀了jQuery函數的文檔，則沒有任何建議可以奏效。

如果要合並兩個單獨的jQuery對象，請使用add方法進行操作 ：

b.add(a).css("font-size", "20px");

例：

 var a = $(".c1"); var b = $(".c2"); console.log(a, b); b.add(a).css("font-size", "20px"); 

 <ul> <li class="c1">1</li> <li class="c2">2</li> <li>3</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

或者，當然，在單次調用$時使用選擇器組 ：

$(".c1, .c2").css("font-size", "20px");

 $(".c1, .c2").css("font-size", "20px"); 

 <ul> <li class="c1">1</li> <li class="c2">2</li> <li>3</li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

您可以在單個查詢中選擇多個元素，並用逗號分隔

這應該工作

$(document).ready(function(){
    $(".c2, .c1").css("font-size", "20px");
});

Answer 3

這可能不會回答您的問題，但可能是您沒有利用class element屬性這一事實。 在您的情況下，您分別命名了兩個li類項目.c1和.c2 ，這是一個不好的做法，除非您將它們更改為ID，這是合理的。

您可以為兩個項目應用相同的類名（即<li class="c"></li> ），然后執行以下語句：

$('.c').css('font-size', '20px');

Answer 4

Here is the working code,

$(document).ready(function(){
    var a=$(".c1,.c2");
    console.log(a);
    $(a).css("font-size", "20px");
});
---> $(".c1, .c2").css("font-size", "20px");

Here is the simple syntax to use multiple selector classes −
$('E, F, G,....')

as per your code, 
$(document).ready(function(){
    var a=$(".c1");
    var b=$(".c2");
    console.log(a, b);
    $(b, a).css("font-size", "20px");
});
it is like this, so it's not working.........
---> $(".c1", ".c2").css("font-size", "20px");