多个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");