下面实例。js中 234为什么没有生效，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1-基本选择器</title>
<style type="text/css">
table, td {
border:1px solid #333;
}
table {
border-collapse: collapse;
margin: 30px auto;
width: 80%;
text-align: center;
}
table caption {
font-size: 1.5em;
margin-bottom: 15px;
}
.bg-orange {
font-weight: bolder;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<table>
<caption>用户信息表</caption>
<tr id="title">
<td>01</td>
<td>02</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
</tr>
</table>
</body>
</html>
<!--
1.jquery中的选择器与css中基本上是一致的,便于熟悉css的开发人员快速掌握
2.绝大多数css选择器可以在jquery中直接使用
3.基本选择器,也叫基础选择器,或者入口选择器,简单选择器,功能就是向jquery提供
一级元素,供后面的过滤器进行操作,最主要的有四类: tag,id,class,*
-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
//1. tag标签选择器
$('td').css('backgroundColor','wheat')
//2.id选择器
//把td上的背景去掉,否则会层叠覆盖
$('#title').css('backgroundColor','lightgreen')
//3.class类选择器
$('.mark').addClass('bg-orange')
//4.*通配选择符
$('tr:nth-child(3) ~ *').css('backgroundColor', 'pink')
</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
1479
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
一、js中，1中标签选择器的优先级更高。注释掉后就可以了 二、2中mark类未添加到DOM结构中。