html选择器的层级,jquer基本选择器（层级选择器+范围选择器）

重点：

1、全部兄弟选择器

$(‘li：nth-child(5)~li’).addclass('green')

/选中第五个到最后的li标签/

2、直接选中第一个或最后一个选择器

$(‘li:first-child’).addclass('green')

/直接选中第一个选择器/

$(‘li:last-child’).addclass('green')

/直接选中最后一个选择器/

3、first选择器

$(‘li:first’).addclass('green')

/选中第一个选择器/

4、直接命中元素

方法一、

$(‘li:nth-child(7)’).addclass('green')

/直接选中第七个选择器/

方法二、

$(‘li:eq(7)’).addclass('green')

/直接选中第八个选择器/

5、清楚所有元素或类

$(‘li:eq(7)’).removeAttr('style')

$(‘li:eq(7)’).removeClasss()/空值是所有、如写入类名则取消该类名/

6、大于或小于的清楚样式

$('li':gt(2)').addclass('green')/选中大于2/

$('li':lt(8)').addclass('green')/选中小于8/

7、选中奇数或偶数

$("li:even").addClass('red')/选中奇数，实际上是偶数/

$("li:odd").addClass('green')/选中偶数，实际上是奇数/

以下为代码部分：

实例

html>

Document

li{

list-style: none;

margin: 20px;

}

ul{

text-align: center;

margin-top: 200px;

}

a{

margin-left: 20px;

}

.cls{

background: brown;

}

.red{

color: red;

}

.green{

color: green;

}

• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化
• 测试li文本变化测试文本颜色变化

$('li:first').addClass('cls')

//first选择器，选中了li的第一个元素，并且增加了一个类为cls

$('li:first').css('background','#A52A2A')

//直接选中第一个或最后一个选择器

$('li:last-child').css('background','#A52A2A')

//直接选择最后一个选择器

$('li:nth-child(3)').css('color','red')

//命中选择第三个选择器

$('li:eq(7)').addClass('cls')

//命中选择第八个选择器

$('li').removeAttr('style')

//清除li中的所有属性

$('li').removeClass()

//清楚所有的类

$('li:gt(4)').addClass('red')

//大于5的选择器选中

$('a:lt(5)').addClass('green')

//小于6的选择器选中

$('li').removeAttr('style')

//清除li所有标签元素

$('li').removeClass()

//清除li所有的类

$('a').removeClass()

//清除a所有的类

$('li:even').addClass('red')

//选中所有的偶数,实际为奇数

$('li:odd').addClass('green')

//选中所有的奇数,实际为偶数

运行实例 »

点击 "运行实例" 按钮查看在线实例