CSS3的[att$=val]选择器
2015-04-11 17:47
232 查看
1、实例源码
2、实例结果
![](http://img.blog.csdn.net/20150411174520737?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3、说明
[att$=val],如果元素用att表示的属性的属性值的结尾字符用val指定的字符,则该元素使用这个样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3的[att$=val]选择器</title> <style type="text/css"> [id$=div_border]{ background-color:#9F6; width:160px; font-family:微软雅黑; font-size:18px; font-size-adjust:!important; font-stretch:expanded; font-style:oblique; font-variant:inherit; font-weight:bolder; alignment-adjust:after-edge; alignment-baseline:alphabetic; marquee-speed:normal; } [id$=child]{ background-color:#C00; animation:ease-in; word-break:break-all; font-size:24px; font-style:italic; color:#30F; } </style> </head> <body> <div id="div_border"> <ol> <li id="child1">星期一</li> <li id="parent">星期二</li> <li id="childchild">星期三</li> <li id="sonchild1">星期四</li> <li id="son">星期五</li> <li id="sonchildson">星期六</li> <li id="childsonparent">星期日</li> </ol> </div> </body> </html>
2、实例结果
3、说明
[att$=val],如果元素用att表示的属性的属性值的结尾字符用val指定的字符,则该元素使用这个样式
相关文章推荐
- CSS3的[att=val]选择器
- CSS3的[att=val]选择器
- CSS3的[att*=val]选择器
- CSS3的[att^=val]选择器
- CSS3的[att^=val]选择器
- CSS3的[att$=val]选择器
- CSS3的[att*=val]选择器
- 【CSS3】---结构性伪类选择器-first-child+last-child
- css3新增的选择器
- css3复杂选择器+内容生成+Css Hack
- CSS3 中的伪类选择器
- [CSS3]:CSS3选择器种类和使用方式详解
- CSS3的选择器(一)
- 最全CSS3选择器
- css3兄弟选择器
- 从零开始前端学习[30]:Css3中新增加的选择器二
- CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)
- 使用CSS3新标准选择器用法为现代浏览器添花
- CSS3选择器:enabled 和 disabled
- 30个CSS3选择器的应用