CSS3新增属性选择器
CSS选择器大致可分为三类:基本选择器、属性选择器和伪类选择器。大家都知道,选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的,自然而然就运用自如了吧,像通配符选择器(*)、类选择器(.className)、ID选择器(#IDName)、元素选择器(ul、li等)等等,这里就不赘述了。
而属性选择器早在CSS2中就被引入了,其主要作用就是通过选择带有指定属性的HTML元素从而设置特殊样式。如今,使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。下面我们来看看CSS3中主要增加的几种属性选择器:
Element [attribute]:表示将选择所有运用了属性attribute的元素定义样式。
Element [attribute=”value”]:表示将选择属性attribute的属性值是 “value”的元素定义样式。
Element [attribute^=”value”]:表示将选择属性attribute的属性值是字符串“value”开头的元素定义样式。
Element [attribute$=”value”]:表示将选择属性attribute的属性值是字符串“value”结尾的元素定义样式。
Element [attribute|=”value”]:表示将选择属性attribute的属性值是字符串“value”或 “value-”开头的元素定义样式。
Element [attribute*=”value”]:表示将选择属性attribute的属性值包含字符串
“value”的元素定义样式。
Element [attribute~=”value”]:表示将选择属性attribute里包含属性值“value”的元素,即指属性attribute的属性值是一个词列表,并且各词以空格隔开,其中词列表中包含了一个value词的情况。
下面我们用实例演示下具体用法和效果:
- 我的className是ccjk,ID是first
- 我的className是ccjk
- 我的className是cnccjk
- 我的className是ccjken
- 我的className是cnccjken
- 我的className有ccjk和en
- 我的className是ccjk-en
- 我的className是ccjk,ID是last
页面效果:
下面我们来依次尝试上面的几种属性选择器:
一>,Element [attribute]
添加样式:#demo li[id] {background:#FFCC99;}
查看效果:< 二>,Element [attribute=”value”]
添加样式:#demo li[class=”ccjk”] {background:#FFCC99;}
三>,Element [attribute^=”value”]
添加样式:#demo li[class^=”ccjk”] {background:#FFCC99;}
查看效果:
四>,Element [attribute$=”value”]
添加样式:#demo li[class$=”ccjk”] {background:#FFCC99;}
查看效果:
五>,Element [attribute|=”value”]
添加样式:#demo li[class|=”ccjk”] {background:#FFCC99;}
查看效果:
六>,Element [attribute*=”value”]
添加样式:#demo li[class*=”ccjk”] {background:#FFCC99;}
查看效果:
七>,Element [attribute~=”value”]
添加样式:#demo li[class~=”ccjk”] {background:#FFCC99;}
查看效果:
好了,实例展示完毕。很神奇哦,仅仅是一个小符号就能影响一个选择器,而且这些选择器又非常相似,可以说是需要扣字眼的去理解了。一下子可能理解不来,慢慢参透吧,可以自己敲出来试试,印象会更深刻。
Need a translation service?
Please enter your personal details and we will contact you shortly
Words translated by CCJK
146,096,379Over 95% of our clients recommend our language services to others