实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
.demo {
width: 100px;
border: 1px;
padding: 10px;
}
ul{
list-style: none;
}
li {
float: left;
height: 30px;
line-height: 30px;
width: 30px;
border-radius: 50px;
text-align: center;
background: green;
color: black;
margin-right: 15px;
}
p{
float: left;
height: 30px;
width: 30px;
/*padding: 0;*/
margin: 0;
}
.heighlight {
font-size:200%;
}
</style>
</head>
<body>
<div class="demo">
<ul >
<li class="one">1</li>
<li ><a href="">2</a></li>
<li ><a href="">3</a></li>
<li ><a href="">4</a></li>
<li ><p>5</p></li>
<li ><p>6</p></li>
<li ><p>7</p></li>
<li class="eight">8</li>
<li >9</li>
<li >10</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">></script>
<script type="text/javascript">
// 列表中8个元素 背景色为浅粉，index 从0开始
$('ul li:eq(8)').css('background-color','#FFB6C1')
// index小于2的元素
$('ul li:lt(2)').css('color','#DC143C')
// 第一个P元素 变大
$('p:first').css('font-size','200%')
// class=demo 且 chass=one 的元素 字体变小，class间有空格
$('.demo .one').css('font-size','20%')
// odd：所有奇数
$('p:odd').css('color','#D8BFD8')
// 所有a标签
$('li a').css('color','#87CEEB')
// 所有可见的li
$('li:visible').css('background-color','#32CD32')
//class 类选择器
$('.eight').addClass('heighlight')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
Jquery常用选择器 ： 基本选择器 、层级与特定选择器、内容过滤选择器、表单选择过滤器等
