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;}

查看效果：

好了，实例展示完毕。很神奇哦，仅仅是一个小符号就能影响一个选择器，而且这些选择器又非常相似，可以说是需要扣字眼的去理解了。一下子可能理解不来，慢慢参透吧，可以自己敲出来试试，印象会更深刻。