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,379

Our Client Satisfaction

Rating for previous quarterr

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2019. All rights reserved.
TOP