1、实例源码

<!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]选择器的更多相关文章

  1. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  2. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  3. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  4. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  5. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  6. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  7. CSS3 :nth-child()伪类选择器

    CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好 的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标 准已提出数年 ...

  8. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  9. CSS3 结构性伪类选择器（2）

    CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...

随机推荐

  1. 在CentOS7上实现NFS共享

    一.介绍 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,功能是让客户端通过网络访问不同主机上磁盘里的数据,主要用在类Unix系统上实现文件共享 ...

  2. snowflake分布式唯一id c#实现

    snowflake算法 snowflake是Twitter开源的分布式ID生成算法,结果是一个long型的ID.其核心思想是:使用41bit作为毫秒数,10bit作为机器的ID(5个bit是数据中心, ...

  3. js中sum(2,3,4)和sum(2)(3)(4)都返回9并要求扩展性

    网上有很多关于sum(1)(2)(3),sum(1,2,3)之类的面试题要求输出相同的结果6并要求可以满足扩展,即有多个参数时也能符合题设的要求,所以自己写了部分例子可以大概满足这些面试题的要求 &l ...

  4. QT开发应用程序的欢迎界面

    主界面启动太慢,通常要10秒以上,所以想加个欢迎界面,等程序加载好再显示主界面. 主界面(类名为MainWindow)启动慢的原因是构造函数需要执行大量初始化的工作. 创建了Welcome类作为欢迎界 ...

  5. BCDEdit命令添加WinPE启动项

    bcdedit /create {ffffffff-8d96-11de-8e71-ffffffffffff} /d "系统维护" /device bcdedit /create   ...

  6. Hive metastore源码阅读（三）

    上次写了hive metastore的partition的生命周期,但是简略概括了下alter_partition的操作,这里补一下alter_partition,因为随着项目的深入,发现它涉及的地方 ...

  7. 解决`向github提交代码是老要输入用户名密码`

    在命令行输入命令:git config --global credential.helper store☞ 这一步会在用户目录下的.gitconfig文件最后添加: [credential] help ...

  8. Python比较运算符

    判断两个对象之间的关系,和条件选择和循环结合使用的 以下假设变量a为10,变量b为20: 示例1:输入三个互不相等的整数,按照从小到大输出 num01,num02,num03 = eval(input ...

  9. CUP、内存、磁盘是如何在一起工作的

    IT技术发展到今天,计算机能做的事情可谓复杂的多.那么计算机是如何做出如此复杂的运算的呢? 不准确的说,计算机主要做两件事,数据计算和数据存储. 第一先说说计算机是如何计算的吧. 我们平时见到的所有计 ...

  10. Hive 时间日期处理总结

    最近用hive比较多,虽然效率低,但是由于都是T+1的业务模式.所以也就不要求太多了,够用就行.其中用的吧比较多就是时间了,由于大数据中很多字段都不是标准的时间类型字段,所以期间涉及了很多的时间日期字 ...