jquery引用css类型选择器的问题答案

【问题标题】：jquery referring issues with css' type selectorjquery引用css类型选择器的问题
【发布时间】：2012-03-20 10:41:58
【问题描述】：

在下面的 sn-p 代码中，我想单击顶部框来切换颜色，但 jQuery 没有正确引用该对象。任何帮助将不胜感激。该框用 id='tst' 的表标记。框本身是一个 td 单元格，它是 id 选择器“tst”（在 css 中定义）的类型选择器。 jQuery 不知何故没有引用该对象。请参阅下面的代码。底框仅供参考...

<html><head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tst td").click(function(){
$(this).toggleClass('green');
});
});
</script>

<style type="text/css">
table#tst {border:solid 1px;}
#tst td 
{background-color: red;}

.green {background-color:green;}
</style>

</head>

<body>
<p>Click the top box to toggle color between red and green.<br> Bottom box is for    reference.</p>
<table id="tst"><tr><td width=50 height=50></td></tr></table>
<br>
<table border=1><tr><td width=50 height=50></td></tr></table>

</body>
</html>

【问题讨论】：

标签： jquery css types jquery-selectors

【解决方案1】：

#tsd td 是比.green 更具体的选择器。
因此，添加green 类实际上并不会改变颜色。

【讨论】：

是的，你应该这样做td.green { background-color: green; }
@elclanrs：这无济于事； ID 仍然更具体。
你是对的。 !important 会做到这一点。但好吧，这不是最优雅的解决方案......
或者不使用!important:#tsd td.green { background-color: green; }

【解决方案2】：

http://jsfiddle.net/CdeNA/ - 工作。

【讨论】：