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. ABP示例程序-使用AngularJs，ASP.NET MVC，Web API和EntityFramework创建N层的单页面Web应用

    本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深 ...

  2. JVM学习(二)

    Java中的内存的划分可以用下图来表示: 程序计数器:每一个线程都有一个程序计数器,记录需要执行的下一条指令. HootSpot虚拟机中,不区分虚拟机栈和本地方法栈,统一称为栈.虚拟机栈和本地方法栈也 ...

  3. java HotSpot 内存管理白皮书

    原文见:http://www.open-open.com/lib/view/open1381034220705.html.查阅资料后,对原文做了补充. 文中关于JVM的介绍基于JDK1.6的Hotsp ...

  4. 洛谷 [P3033] 牛的障碍

    利用二分图匹配求最大独立集 本题的边一定平行于坐标轴,且同向的线段一定不重合,这是经典的二分图建图方法,本题要求的是最大不重合的线段数,那就是求二分图的最大独立集,最大独立集=总点数-最大匹配数. 本 ...

  5. bzoj 4825: [Hnoi2017]单旋 [lct]

    4825: [Hnoi2017]单旋 题意:有趣的spaly hnoi2017刚出来我就去做,当时这题作死用了ett,调了5节课没做出来然后发现好像直接用lct就行了然后弃掉了... md用lct不知 ...

  6. BZOJ 2141: 排队 [CDQ分治]

    题意: 交换序列中两个元素,求逆序对 做分块做到这道题...一看不是三维偏序嘛.... 作为不会树套树的蒟蒻就写CDQ分治吧.... 对时间分治...x排序...y树状数组... 交换拆成两个插入两个 ...

  7. BZOJ 2199: [Usaco2011 Jan]奶牛议会 [2-SAT 判断解]

    http://www.lydsy.com/JudgeOnline/problem.php?id=2199 题意:裸的2-SAT,但是问每个变量在所有解中是只能为真还是只能为假还是既可以为真又可以为假 ...

  8. Asp.Net Core 2.0 之旅---在Ubuntu上部署WEB应用程序

    1.Ubuntu 上 安装NET Core 2.0 SDK 第一步的安装,微软大佬已经写的非常详细了=>直达链接,按照教程来即可. 2.将我们的WEB 发布到一个文件夹,将这个文件夹打包成 压缩 ...

  9. 安装kvm模块配置网络

    1. vmware安装centos6.6 64位 (略) 其中有几个注意的地方:a. 内存给2gb. 磁盘给50g, 或者再单独分一个磁盘,用来存储虚拟机文件c. 最关键的一步,在创建虚拟机时,cpu ...

  10. html拨打电话、发送短信、发送邮件的链接写法

    拨打电话 <a href="tel:88888888">呼叫</a> 发送短信 <a href="sms:88888888"> ...