常用CSS与Jquery选择器

1.常用CSS选择器

在介绍CSS选择器之前先介绍CSS各个选择器的权重，权重用于解决CSS样式的冲突问题。

a.选择器权重

选择器	权重
继承 *	0，0，0，0
伪元素，元素选择器	0，0，0，1
类， 伪，伪类，属性选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

注：权重用二进制表示，二进制数字越大该选择器优先级越高。有时候我们写的样式没起效果有可能是权重导致的优先级问题。

b.基础选择器：包括标签选择器、类选择器、id选择器、通配符选择器

选择器	类型	功能描述
标签选择器	标签选择器	选择该标签
.class	类选择器	选择某类
#id	id选择器	选择该id
*	通配符选择器	选择该页面所有元素

c.属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	选择具有att属性且值以val开头的E元素
E[att$=“val”]	选择具有att属性且值以val结尾的E元素
E[att*=“val”]	选择具有att属性且值中含有val的E元素

d.伪类选择器

链接伪类选择器	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接
e：focus	用于获得焦点的表单元素

注：为确保生效，按照LVHA的顺序来书写。

e.结构伪类选择器

选择符	说明
E：first-child	匹配父元素中的第一个子元素E
E：last-child	匹配父元素中最后一个E元素
E：nth-child（n)	匹配父元素中的第n个子元素E，会把所有子元素都排号n,可以是数字、公式（只能是n）、关键字（even，odd）
E：first-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：last-of-type（n）	指定类型E的第n个

注：元素E和冒号之间用空格隔开

f.伪元素选择器

选择符	说明
：：before	在元素内部的前面插入内容
：：after	在元素内部的后面插入内容

2.常用jquery选择器 a.基本用法

$("选择器")  //里面的选择器可以直接写CSS选择器，但是要加引号

b.jQuery筛选选择器

语法	用法	描述
：eq(index)	$(“li:eq(2)”)	获取li元素，选择索引号为2的元素，index从0开始
:odd/:even	$(“li:odd”)	获取li元素，选择索引号为奇数的元素

c.jquery筛选方法

语法	用法	描述
parent()	$(“li”).parent()	查找最近一级的父级
children(selector)	$(“ul”).children(“li”)	相当于ul>li，选择最近一级子级
find(selctor)	$(“ul”).find(“li”)	相当于ul li，后代选择器
siblings(selector)	$(“.first”).siblings(“li”)	查找兄弟节点，不包括本身
nextAll([expr])	$(“.last”).nextAll()	查找当前元素之后所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“pro”)	查找当前元素是否含有某个特定的类，有则返回true
eq（index）	$(‘ul li’).eq(2)	索引号从0开始

注：本文只介绍了常用选择器，更多选择器的用法请去CSS官网查询。