CSS 选择符有很多,本文只举几个有趣的例子简单说一说,完整内容可参考:http://www.w3school.com.cn/cssref/css_selectors.asp。
a b
要求 b 是 a 的后代。包括儿子、孙子、重孙子……
a>b
要求 b 是 a 的儿子。不能是孙子、重孙子……,但要注意,如果 b 下还有 b,虽然没有直接作用于下级 b,但下级 b 可能会从上级 b 继承。
a~b
要求 b 是 a 的弟弟。
a+b
要求 b 是 a 的第一个弟弟。
a[prop="value"]
要求 a 的 prop 属性值等于 value 的元素。注意:大小写敏感,jQuery 中也是。
a[prop^="value"]
要求 a 的 prop 属性值以 value 开头。注意:大小写敏感,jQuery 中也是。
a[prop$="value"]
要求 a 的 prop 属性值以 value 结尾。注意:大小写敏感,jQuery 中也是。
a[prop*="value"]
要求 a 的 prop 属性值含有 value。相当于 SQL 的 like %value%。注意:大小写敏感,jQuery 中也是。
a[prop~="value"]
要求 a 的 prop 属性值含有 value。这个含有和 * 的意义不一样,它是指属性值用空格分隔,分隔出来后,若有等于 value 的,就选中。比如 class="f1 f2" 匹配 a[class~="f1"],但 class="f12 f2" 不匹配。注意:大小写敏感,jQuery 中也是。
a:first-child
要求 a 是其父元素的第一个元素。注意不是指“第一个 a 元素”,而是指“第一个元素”。
a:last-child
要求 a 是其父元素的最后一个元素。
a:first-of-type
要求 a 是其父元素的第一个同类型元素。
first-child 与 first-of-type 的区别是?看个例子:
<style type="text/css"> p:first-of-type { color:red; } </style> <div> <span>s</span> <p>1</p> <p>2</p> <p>3</p> </div>
如上仅 1 是红色,再看:
<style type="text/css"> .p2:first-of-type { color:red; } </style> <div> <p class="p1">1</p> <p class="p2">2</p> <p class="p2">3</p> </div>
1、2、3 都不是红色,再看 first-child:
<style type="text/css"> p:first-child { color:red; } </style> <div> <span>s</span> <p>1</p> <p>2</p> <p>3</p> </div>
1、2、3 都不是红色。
a:last-of-type
要求 a 是其父元素的最后一个同类型元素。
a:nth-child(n)
意同 :first-child,只是这个 n 指定第几个,如果 n 是 1,则等同于 first-child。也可以使用表达式,比如 2n+1,表示:1、3、5、7……时响应这个。
a:nth-last-child(n)
与 :nth-child 相比,它是从后面往上数。
a:nth-of-type(n)
意同 :first-of-type,只是这个 n 指定第几个,如果 n 是 1,则等同于 first-of-type。
a:nth-last-of-type(n)
与 :nth-of-type 相比,它是从后面往上数。
input:enabled
选择启用的 input 元素。
input:disabled
选择禁用的 input 元素。
input:checked
选择选择的 input 元素。
:not(selector)
示例 :not(p),指除 p 以外的元素。
相关阅读