Blog

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;} 查看效果: 好了,实例展示完毕。很神奇哦,仅仅是一个小符号就能影响一个选择器,而且这些选择器又非常相似,可以说是需要扣字眼的去理解了。一下子可能理解不来,慢慢参透吧,可以自己敲出来试试,印象会更深刻。

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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