jQuery中的后代选择器和孩子选择器

最新推荐文章于 2024-08-17 10:09:50 发布

疆~

最新推荐文章于 2024-08-17 10:09:50 发布

阅读量4.7k

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_40323256/article/details/89284253

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style type="text/css">
			
		</style>
		<script type="text/javascript">
			$(function(){
                //$("祖先 后代")
                $("table tfoot").css("background-color","#9ACD32");//后代选择器
				$("p>span").css("background-color","red");//孩子选择器
				$("#mytable thead").css("background-color","deepskyblue");
			});
			
		</script>
	</head>
	<body>

		<table id="mytable" border="0" cellspacing="" cellpadding="10">
			
			<div>
				<p>
					我是<span>李疆</span>，啦啦啦
				</p>
			</div>
			
			<thead>
				<tr><th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th></tr>
			</thead>
			
			<tbody>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
				<tr>
					<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
				</tr>
			</tbody>
			
			<tfoot>
				<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
			</tfoot>
			
		</table>
			
		<table border="1" cellspacing="1" cellpadding="5">
			<tr>
				<th>收费单位</th><th>付款方式</th><th>结算方式</th><th>状态</th>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			<tr>
				<td>xxx有限公司</td><td>手机</td><td>支付宝</td><td>已付款</td>
			</tr>
			
			<tfoot>
				<tr><td>统计</td><td>统计</td><td>统计</td><td>统计</td></tr>
			</tfoot>
		</table>
	</body>
</html>