基本选择器代码如下:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</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:50px;
}
.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>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
<tr class="mark">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src ="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//tag标签选择器
// $('td').css('backgroundColor','wheat')
//id选择器
$('#title').css('backgroundColor','green')
// class选择器:
$('.mark').addClass('bg-orange')
//通配符选择器
$('tr:nth-child(2) ~*').css('backgroundColor','pink')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
其中的3个层级选择器:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
.green{
color:green;
}
.red{
color:red;
}
</style>
</head>
<body>
<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>
<li>流行歌曲05<a href="">立即播放</a></li>
<li>流行歌曲06<a href="">立即播放</a></li>
<li>流行歌曲07<a href="">立即播放</a></li>
<li>流行歌曲08<a href="">立即播放</a></li>
<li>流行歌曲09<a href="">立即播放</a></li>
<li>流行歌曲10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src ="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//后代选择器:空格
$('li a').addClass('green')
//所有子元素选择器
//孙子元素<a>文本不会发生变化
//$('ul > *').addClass('red')
//相邻兄弟选择器+ 将第5个li的下一个兄弟:第6个li前景色变更为绿色
// $('li:nth-child(5)+li').addClass('red')
////4. 全部兄弟元素 ~
$('li:nth-child(5) ~li').addClass('green')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例