www.cftea.com

CSS 实际应用-一些有趣的 CSS 选择符

ITPOW2017/2/23 14:36:04

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 以外的元素。

相关阅读

<<返回首页<<