本文共 3028 字，大约阅读时间需要 10 分钟。

一、基础选择器

$里面填写的就是css选择器的选择方法

$('#list1').css('background','green')//通过id选取$('.red').css('background','red')//通过class选取$('li').css('background','grey')//通过元素名选取$('li,p').css('font-size','20px')//选取li和p

二、层级选择器

$('div a').css('color', 'green'); //div下子元素中的全部a标签$('div>a').css('color', 'red'); //选中div的子元素a$('div a.link + a').css('color', 'purple'); //选中a标签后面的一个a元素$('div a.link ~ a').css('color', 'blue'); //选中a标签后面所有的同级a元素

三、属性选择器

$('#ulColor li[class]').css('background', 'pink'); // li中含有class的标签$('#ulColor li[title=blue]').css('background', 'grey'); //li中title的值为blue的标签$('#ulColor li[title!=blue]').css('background', 'yellowgreen'); //同级中除了title=blued的其它所有元素$('#ulColor li[title|=css]').css('background', 'darkgreen'); //前缀是用-隔开的$('#ulColor li[id^=color]').css('background', 'hotpink'); //以属性值为开始（不需要-隔开）$('#ulColor li[id$=color]').css('background', 'purple'); //以属性值为结尾（不需要-隔开）$('#ulColor li[lang*=cn]').css('background', 'olive'); //属性中包含cn字符串$('#ulColor li[lang~=cn]').css('background', 'skyblue'); //属性中包含cn单词，用空格隔开$('#ulColor li[class=cl][name=kaivon]').css('background', 'teal'); //属性中包含cn单词，用空格隔开

四、基础过滤选择器，冒号前面就是选中的，冒号后面就是排除的条件

$('#olColor li:eq(1)').css('border', '5px solid pink'); //下标为1的标签$('#olColor li:gt(1)').css('border', '5px solid grey'); //大于下标为1的标签$('#olColor li:lt(3)').css('border', '5px solid yellowgreen'); //小于下标为3的标签$('#olColor li:not(#olColor li:eq(2))').css('border', '5px solid darkgreen'); //除了选中的那个标签，其他的全部选中$('#olColor li:even').css('border', '5px solid hotpink'); //偶数$('#olColor li:odd').css('border', '5px solid purple'); //奇数$('#olColor li:first').css('border', '5px solid olive'); //第一个$('#olColor li:last').css('border', '5px solid skyblue'); //最后一个$('#olColor li:lang(en)').css('border', '5px solid teal'); //lang属性$('#olColor li:target(tar)').css('border', '5px solid yellow'); //tatget属性$(':root').css('border', '2px solid blue'); //根节点$(':header').css('border', '5px solid darkgreen'); //所有的h标签

五、子元素过滤器

$('#paragraph p:first-child').css('color', 'pink'); //第一个子元素必需是p标签$('#paragraph span:first-of-type').css('color', 'yellowgreen'); //选择到第1个span标签$('#paragraph span:last-child').css('color', 'darkgreen');$('#paragraph p:last-of-type').css('color', 'hotpink');$('#paragraph p:nth-child(2)').css('color', 'blue'); //选择到第2个子元素，并且这个子元素必需是p标签$('#paragraph span:nth-of-type(2)').css('color', 'olive');//选择到第二个span标签$('#only p:only-child').css('color', 'skyblue'); //选择到只有一个子元素的标签$('#only-two span:only-of-type').css('font-size', '30px'); //选择到只有一个span子元素的标签

六、内容过滤选择器

$('#content:contains(kaivon)').css('color', 'blue');//选择内容为kaivon的标签$('div:empty').css({
   	width: '100px',	height: '100px',	background: 'green'});//选中所有没有内容的div标签$('#has:has(p)').css('border', '1px solid #000');//判断是否含有p标签$('#title:parent').css('border', '1px solid #f00');

七、表单过滤选择器

$(':button').css('border', '2px solid #f0f'); //选择到所有的按钮$('#sex input:checkbox').wrap('').parent().css('border', '2px solid purpLe');//让所有的选中的标签我们加一个span标签，然后给父级加上css属性 $(':checked').wrap('').parent().css('border', '2px solid blue');

转载地址：http://gxtzi.baihongyu.com/