CSS选择器详解（总结）

一、CSS选择器。

a、基本选择器详解。

名称	语法构成	描述	返回值	示例
标签选择器	element	根据给定的标签名匹配元素	元素集合	$(“h2”)选取所有的h2元素
类选择器	.class	根据给定的class匹配元素	元素集合	$(“.title”)选取所有class为title的元素
ID选择器	id	根据给定的id匹配元素	单个元素	$(“#title”)选取id为title的元素
并集选择器	selector1, selector2, …., selectorN	将每一个选择器匹配的元素 合并后一起返回	元素集合	$(“div,p,.title”)选取 所有div、p和拥有class为 title的元素。
交集选择器	element.class 或 element#id	匹配指定class 或 id 的某元素 或元素集合（若在同一页面中 指定id的元素返回值，则一定 是单个元素；若指定class 的元 素，则可以是单个元素，也可 以是元素集合）	单个元素或 多个元素集合	$("h2.title")选取所有拥有 class为title的h2元素。
全局选择器	*	匹配所有元素	集合元素	$(“*”)选取所有的元素

PS：CSS选择器优先级的结论是：

       id选择器优先级 > 类class选择器优先级 > 标签选择器优先级

---

b、层次选择器的详细

名称	语法构成	描述	返回值	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有 descendant（后代）元素	元素集合	$(“#menu span”)选取#menu 下 所有的<span>元素
子选择器	parent>child	选取parent元素下的child(子) 元素	元素集合	$(“#menu>span”)选取#menu下 的子元素<span>
相邻元素选择器	prev+next	选取紧邻prev元素之后的 next元素	元素集合	$(“h2+dl”)选取紧邻<h2>元素 之后的同辈元素<dl>元素。
同辈元素选择器	prev~sibimgs	选取prev元素之后的 所有siblings（同辈）元素	元素集合	$(“h2~dl”)选取<h2>元素 之后的所有同辈元素<dl>元素

---

c、属性选择器的详细

语法构成	描述	返回值	示例
[attribute]	选取包含给定属性 的元素	元素集合	$(“[href]”)选取含有href属性的元素。
[attribute = value]	选取等于给定属性是 某个特定值的元素	元素集合	$(“[href = ‘#’]”)选取href属性值为 “#”的元素。
[attribute != value]	选取不等于给定属性是 某个特定值的元素	元素集合	$(“[href != ‘#’]”)选取href属性值不 为“#”的元素。
[attribute ^= value]	选取给定属性是 以某些特定值开始的元素	元素集合	$(“[href ^= ‘en’]”)选取href属性值以 “en”开头的元素。
[attribute $= value]	选取给定属性是 以某些特定值结尾的元素	元素集合	$("[href $= '.jpg']")选取href属性值 以“.jpg”结尾的元素。
[attribute *= value]	选取给定属性是 包含某些值的元素	元素集合	$("[href *= 'txt']")选取href属性值中 含有“txt”的元素。
[selector] [selector2] [selectorN]	选取满足多个条件的 复合属性的元素	元素集合	$("li[id][title=新闻要点]")选取含有 id属性和title属性为“新闻要点”的 <li>元素。

---