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 [attribute *= value]选取给定属性是 包含某些值的元素元素集合$("[href *= 'txt']")选取href属性值中 含有“txt”的元素。[selector] [selector2] [selectorN]选取满足多个条件的 复合属性的元素元素集合$("li[id][title=新闻要点]")选取含有 id属性和title属性为“新闻要点”的 <li>元素。