jquery使用css改变颜色一个工作但另一个工作不起作用

Question

为什么只有名字改变颜色但年龄没有变化？

<div id="user">
<?php echo $user_name; ?>
<span class="age"><?php echo $user_age; ?></span>
</div>

用户名颜色变化正在工作但跨度内的年龄不起作用。

$(document).ready(function(){
$('#user').css('color','red');
$('#user#age').css('color','gray');  
});

Answer 1

试试这个

$('#user .age').css('color','gray'); 

你有一个班级'年龄'，选择器应该以''开头。它在#user里面，所以你需要#user和.age之间的空格。

Answer 2

您正在使用ID，您应该使用类

$('#user#age') // looks for something like <div id="user age"></div> which is invalid

应该是

$('#user .age') // looks for <div class="age"></div> inside <div id="user"></div>

没有任何空格，它会在同一元素上查找多个属性。 使用该空间，它会在其他元素中查找具有最后一个属性的元素。 您还可以使用逗号查找具有一个或另一个属性的元素

$('#user, .age') // targets both <div id="user"></div> and <div class="age"></div>

Answer 3

#user#age会匹配id和user age的元素。这显然是不可能的，因为元素不能有2 id s。如果您想匹配.age中的#user，则需要在它们之间留一个空格。

此外，age是一个类，而不是id。课程使用.而非#。

添加所有这些，你的选择器应该是：

#user .age

Answer 4

因为它是一个类，所以使用点来选择

$(function(){
  $('#user .age').css('color','gray');  
});

以下是工作示例：http://jsfiddle.net/35G5j/1/

#用于选择ID

.用于选择css类

Answer 5

因为在您的定义age是类，而不是 ID ，您可以这样做：

$(document).ready(function(){
    $('#user').css('color','red');
    $('.age').css('color','gray');  
});

这应该有效。

Answer 6

因为年龄是一个类的名称而不是id所以你不能使用＃必须使用。