实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0403作业</title>
<style>
table, td {
border: 2px solid black;
}
table{
width: 400px;
margin: auto;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
.df{
background-color: #66CCFF;
}
.red {color:red;}
.green {color:green;}
</style>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<table>
<tr id="td1">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="td2">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<ul>
<li>最新电影01<a href="">立即播放</a></li>
<li>最新电影02<a href="">立即播放</a></li>
<li>最新电影03<a href="">立即播放</a></li>
<li>最新电影04<a href="">立即播放</a></li>
</ul>
</body>
<script>
// 标签选择器
// $('td').css('background-color','green')
// ID选择器
$('#td1').css('background-color','red')
// class选择器
$('.td2').addClass('df')
// *通配符选择器
$('tr:nth-child(3)~*').css('background-color','yellow')
// 后代选择器
$('li a').css('background-color','red')
$('li:first-child').addClass('green')
$('li:nth-child(3)').addClass('red')
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
