实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
table, td {
border:1px solid green;
}
table {
width: 75%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
}
table caption {
font-size: 1.8em;
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>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr class="choose">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr class="choose">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</table>
</body>
</html>
<!-- 基本格式都是一样的，套用css的样式即可 -->
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//1. tag标签选择器
$('td').css('backgroundColor','lightblue')
//2.id选择器
//把td上的背景去掉,否则会层叠覆盖
$('#title').css('backgroundColor','lightgreen')
//3.class类选择器
$('.choose').addClass('bg-orange')
//4.*通配选择符
$('tr:nth-child(3) ~ *').css('font-size', '1.5em')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
