CSS3 选择器

1. 选择器概述

1.使用元素的class属性的缺点:

class本身没有语义,纯粹为css样式服务
并没有把样式与元素结合起来

  1. css3

将样式与元素直接绑定起来,使用选择器指定样式。采用类似E[foo$="val"]正则表达式形式

例:指定id末尾字母为"t"的div元素的背景色为蓝色

div[id$="t"] {background:red}

2. 属性选择器概述

3. 属性选择器

  1. [att*=val]

含义:如果元素用att表示的属性的属性值中包含用val指定的字符,则该原色使用这个样式。

//css
[id=image-boarder] {width:450px;}
//html
<div id="image-boarder" class="hhh"></div>
  1. [att^=val]

匹配开头相同的属性名

//css
[id^=sider] {width:450px;}
//html
<div id="sider" class="hhh"></div>

此段代码的意思是将id以sider开头的val设置宽450px;
3. [att$=val]

匹配末尾相同的属性名

//css
[id$=sider] {width:450px;}
//html
<div id="sider" class="hhh"></div>

此段代码的意思是将id以side结尾的val设置宽450px;

灵活的运用属性选择器

如果能够灵活应用属性选择器,目前为止需要依靠id或class才能实现的样式利用属性选择器就能完全实现。

例如,利用[att$=val]属性选择器,可以根据超链接中的不同的文件扩展名使用不同的样式。

a[href$=html]{content:"web网页"}
a[href$=jpg]{content:"图像文件"}

上面代码中,在超链接地址的末尾为"jpg"的显示“图像文件”,为“html”的显示“web网页”

posted @ 2017-03-02 18:38  叫我小红依吧  阅读(129)  评论(0编辑  收藏  举报