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

作者:vkvi 来源:千一网络(原创) 日期:2017-2-23

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

a[prop^="value"]

要求 a 的 prop 属性值以 value 开头。

a[prop$="value"]

要求 a 的 prop 属性值以 value 结尾。

a[prop*="value"]

要求 a 的 prop 属性值含有 value。相当于 SQL 的 like %value%。

a[prop~="value"]

要求 a 的 prop 属性值含有 value。这个含有和 * 的意义不一样,它是指属性值用空格分隔,分隔出来后,若有等于 value 的,就选中。比如 class="f1 f2" 匹配 a[class~="f1"],但 class="f12 f2" 不匹配。

a:first-child

要求 a 是其父元素的第一个元素。注意不是指“第一个 a 元素”,而是指“第一个元素”。

a:last-child

要求 a 是其父元素的最后一个元素

a:first-of-type

要求 a 是其父元素的第一个同类型元素

first-child 与 first-of-type 的区别是?看个例子:

如上仅 1 是红色,再看:

1、2、3 都不是红色,再看 first-child:

1、2、3 都不是红色。

a:last-of-type

要求 a 是其父元素的最后一个同类型元素

a:nth-child(n)

意同 :first-child,只是这个 n 指定第几个,如果 n 是 1,则等同于 first-child。

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

你前面那位网友看了:URLEncode、URLDecode-ASP UTF-8 版本

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他