CSS3新增属性选择器

CSS选择器大致可分为三类:基本选择器、属性选择器和伪类选择器。大家都知道,选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的,自然而然就运用自如了吧,像通配符选择器(*)、类选择器(.className)、ID选择器(#IDName)、元素选择器(ul、li等)等等,这里就不赘述了。
而属性选择器早在CSS2中就被引入了,其主要作用就是通过选择带有指定属性的HTML元素从而设置特殊样式。如今,使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。下面我们来看看CSS3中主要增加的几种属性选择器:


  1. Element [attribute]:表示将选择所有运用了属性attribute的元素定义样式。

  2. Element [attribute="value"]:表示将选择属性attribute的属性值是 “value”的元素定义样式。

  3. Element [attribute^="value"]:表示将选择属性attribute的属性值是字符串“value”开头的元素定义样式。

  4. Element [attribute$="value"]:表示将选择属性attribute的属性值是字符串“value”结尾的元素定义样式。

  5. Element [attribute|="value"]:表示将选择属性attribute的属性值是字符串“value”或 “value-”开头的元素定义样式。

  6. Element [attribute*="value"]:表示将选择属性attribute的属性值包含字符串
    “value”的元素定义样式。

  7. Element [attribute~="value"]:表示将选择属性attribute里包含属性值“value”的元素,即指属性attribute的属性值是一个词列表,并且各词以空格隔开,其中词列表中包含了一个value词的情况。


下面我们用实例演示下具体用法和效果:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title> CSS3新增属性选择器|CCJK本地化官方博客</title>
<style>
*{margin:0; padding:0;}
#demo {width:240px; border:1px solid #CC0099; margin:20px auto 0; padding:20px; list-style:none; font-family:"微软雅黑"; font-size:14px;}
#demo li {line-height:30px; height:30px; background:#FFCCFF; margin:2px 0; padding:0 5px;}
</style>
</head>
<body>
<ul>
<li id="first">我的className是ccjk,ID是first</li>
<li>我的className是ccjk</li>
<li>我的className是cnccjk</li>
<li>我的className是ccjken</li>
<li>我的className是cnccjken</li>
<li>我的className有ccjk和en</li>
<li>我的className是ccjk-en</li>
<li id="last">我的className是ccjk,ID是last</li>
</ul>
</body>
</html>
页面效果:
下面我们来依次尝试上面的几种属性选择器:
一>,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

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

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

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