而$("div:has(span)").css("color","red")表示设置含有span元素的div的文字为红色。
两个选择器得到的对象是不一样的。 两段代码的效果也是不一样的。
你可以用这两句做测试：
<html>
<head>
<script type="text/javascript" src='jquery-1.4.4.js'></script>
<script type="text/javascript">
$(
function()
{
//$("div:has(span)").css("color","red")
$("div span").css("color","red")
}
)
</script>
</head>
<body>
<form id="form1">
<div>123<span>456</span></div>
<div>789</div>
</form>
</body>
</html>
就是table标签下面的tbody标签下面的tr标签，并且tr标签要有td标签，同时，td标签要是多个的话就取最后一个，同时，取得的td标签还要有checkbox:enabled，就是checkbox是激活可用的。最后，把选择的checkbox的css样式设置成背景为红色。其实，就是选择器的使用。:has(selector)
匹配含有选择器所匹配的元素的元素
:last
匹配找到的最后一个元素
parent >child
在给定的父元素下匹配所有的子元素
css(name,value)
在所有匹配的元素中，设置一个样式属性的值。
数字将自动转化为像素值
结合这些，应该你能明白了。
jquery获取对象的css属性值的时候，就算我们没有给这个对象设置过css属性值，这些值也会存在，只不过有些是默认值。下面我们来输出一个div的css属性值，原始代码如下
<!DOCTYPE html><html>
<head>
<title>DIV_TEST</title>
<meta charset="utf-8"/>
<style type="text/css">
#top1{
}
</style>
</head>
<body>
<div id="top1">
<u>你好我是某某某</u>
</div>
<script src="jquery-3.2.1.min.js" ></script>
<script>
$(document).ready(function(){
console.log("float的值是："+$("#top1").css("float"))
console.log("height的值是："+$("#top1").css("height"))
console.log("overflow的值是："+$("#top1").css("overflow"))
console.log("color的值是："+$("#top1").css("color"))
console.log("big的值是："+$("#top1").css("big"))
})
</script>
</body>
</html>
结果如下
可以看到我们没有设置过div的css属性，除了高度以外剩下的只要存在这个css属性的都是默认值，唯一不同的是最后一个big属性，我们知道这个属性不是css的属性，因此我们判断有没有某个属性的时候可以通过这个方式判断
$(document).ready(function(){console.log("是否存在big属性："+testHasCss($("#top1"),"big"))
console.log("是否存在color属性："+testHasCss($("#top1"),"color"))
console.log("是否存在display属性："+testHasCss($("#top1"),"display"))
console.log("是否存在gogo属性："+testHasCss($("#top1"),"gogo"))
})
var testHasCss = function(obj,cssStr){
if((obj).css(cssStr) === undefined){
return false
}else{
return true
}
}
结果如下
