CSS3-属性选择器

·  阅读 48
CSS3-属性选择器

最近上班不忙,摸到一本HTML5和CSS3权威指南,上册是HTML5,下册是CSS3。没看HTML5是因为上册放在茶水间一摞书的最上面,全是灰,所以抽了下面的CSS3看。正好最近样式写的自己都觉得有点一坨的感觉。。。但愿一个月能看完

属性选择器不是CSS3新出的,原来也有,只是在原来的基础上进行了扩展。

1. CSS2属性选择器

语法:

ele[attr=value] // 变量从前往后依次是元素、属性名、属性值
复制代码

例如:

div[id=section]  // id为section的div元素
复制代码

2. CSS3属性选择器

css3扩展了如下:

1. 以value开头

[attr^=value] 
复制代码

例如:

<div class="wrap">
  <div class="wrap-header">
  <div class="wrap-content">
</div>
//css如下:
[class^=wrap] { // class以wrap开头的所有元素,但是优先级低,即使使用了!important也无效
   color: "#f00"
}
复制代码

2. 以value结尾

[attr$=value]
复制代码

例如:

<div class="wrap">
  <div class="header-1">
  <div class="content-1">
</div>
//css如下:
[class$=\-1] { // !!!其中-需要转义
   color: "#f00"
}
复制代码

3. 包含value

[attr*=value]
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改