码迷,mamicode.com
首页 > Web开发 > 详细

CSS3属性选择器

时间:2016-09-03 01:08:54      阅读:961      评论:0      收藏:0      [点我收藏+]

标签:

<div id="section1"> 示例文本1</div>

<div id="subsection1-1">示例文本1-1</div>

<div id="subsection1-2">示例文本1-2</div>

<div id="section2">示例文本2</div>

<div id="subsection2-1">示例文本2-1</div>

<div id="subsection2-2">示例文本2-2</div>

CSS2中使用属性选择器来设置

<style type=text/css>

[id = section1]{

     background:yellow;

}

</style>

CSS3中的属性选择器

1.[att*=val]属性值包含用val指定的字符

[id*=section]{

    background:yellow;

}

则页面中id为"section1"、"subsection1-1"、"subsection1-2"的div元素的背景色都变为黄色,因为这些元素的id属性中都包含"section"字符。

2.[att^=val]属性值的开头字符为用val指定的字符,则该元素使用这个样式

[id^=val]{

   background:yellow;

}

页面中id为"section1"、"section2"的div元素的背景色都变为黄色,因为这些元素的id属性的开头字符都为"section"。

3.[att$=val]结尾字符为用val指定的字符

[id$=\-1]{

   background:yellow;

}

页面中为"subsection1-1"、"subsection2-1"的div元素的背景色变为黄色,因为其以"-1"结尾。

注意:要在指定的匹配字符前必须加上"\"这个escape字符。

CSS3属性选择器

标签:

原文地址:http://www.cnblogs.com/wyaocn/p/5836032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!