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. 03_Linux文件和目录

    一.Linux目录结构 /:根目录,一般根目录下只存放目录,在Linux下有且只有一个根目录.所有的东西都是从这里开始.当你在终端里输入"/home",你其实是在告诉电脑,先从/( ...

  2. JFinal 学习笔记之Handler包分析

    HandlerFactory.java HandlerFactory是不可实例化的,因为 它的构造 函数 特意定位 私有 的:它有一个 静态的方法叫做 getHandler,它有两个参数 ,一个是Ha ...

  3. 使用Dism备份和全新恢复系统

    1.使用WinPE启动,winPE制作可以参考我的另一文章http://www.cnblogs.com/karl-F/p/6934086.html 2.捕获C盘镜像 (1)查看磁盘 在PE提示符:输入 ...

  4. Go学习笔记02-源码

    第二部分 源码 基于 Go 1.4,相关文件位于 src/runtime 目录.文章忽略了 32bit 代码,有兴趣的可自行查看源码文件.为便于阅读,示例代码做过裁剪. 1. Memory Alloc ...

  5. angularjs 服务详解

    一.服务 服务提供了一种能在应用的整改生命周期内保持数据的方法,它能够在控制器之间进行通信,并保持数据的一致性. 1.服务是一个单例对象,在每个应用中只会被实例化一次(被$injector): 2.服 ...

  6. 置换群、Burnside引理与等价类计数问题

    置换群.Burnside引理与等价类计数问题 标签: 置换群 Burnside引理 置换 说说我对置换的理解,其实就是把一个排列变成另外一个排列.简单来说就是一一映射.而置换群就是置换的集合. 比如\ ...

  7. Python 脚本实现对 Linux 服务器的监控

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 原文地址 由于原文来自微信公众号,并且脚本都是图片,所以这里 ...

  8. 原创~vue router-link添加点击事件

    在学习vue中会遇到给router-link添加@click,@mouseover等事件 我想要做的是用v-for循环输出导航菜单,但是下面代码的@click事件和@mouseover并不会响应 &l ...

  9. centos 6.* 配置端口

    vi /etc/sysconfig/iptables 将 -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT     (允 ...

  10. 自制PHP高防防盗链（不是一般的高）（思路）

    原理:根据IP,资源ID,时间戳,一次性Access_Token,APPKEY(暴露在前台)和APPSERECT(后台)来生成参数,具体见下面: 浏览器请求页面=>后台引用防盗链代码=>生 ...