一、基础选择器
$里面填写的就是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('<span></span>').parent().css('border', '2px solid purpLe');//让所有的选中的标签我们加一个span标签,然后给父级加上css属性
$(':checked').wrap('<span></span>').parent().css('border', '2px solid blue');