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. 01_Linux安装

    一.VMware创建一个虚拟机 下一步   .下一步  .下一步 ..前方高能 二.安装CentOS 6.7 next  ->  选择 中文简体  -> 美式键盘,直接下一步  ,一直下一 ...

  2. cdh版本的hive安装以及配置

    hive依赖hadoop 需要的软件包:hive-0.13.1-cdh5.3.6.tar.gz .hadoop-2.5.0-cdh5.3.6.tar.gz 1.hadoop的安装步骤请访问: http ...

  3. 基于flash的web视频对讲直播测试

    由于项目的需求,要在web上实现视频通话的需求.现成的方案有WebRTC,基于浏览器的成熟方案,但是这个方案和公司项目需求有几个点冲突.后来考虑到基于flash的方案.参考雷神的博客 simplest ...

  4. BZOJ 3907: 网格 [Catalan数 高精度]

    3907: 网格 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 402  Solved: 180[Submit][Status][Discuss] De ...

  5. 百度地图、高德地图、Google地图等坐标系相关梳理

    1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...

  6. Zabbix的网络发现

      Zabbix的网络发现 Zabbix的网络发现功能,可以让我们发现网络中的主机或者服务,并在发现该设备后做出相应的操作; 它可以用HTTP.ICMP.SSH.LDAP.TCP.SNMP.Telne ...

  7. [解决问题] E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)

    E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 解决办法: 1.终端输 ...

  8. Ubuntu系统下crontab的使用

    最近一个项目,需要用到一个定时任务,先说crontab的常用命令. crontab -u //设定某个用户的cron服务,一般root用户在执行这个命令的时候需要此参数 crontab -l //列出 ...

  9. 使用js dom和jquery分别实现简单增删改

    <html><head> <meta http-equiv="Content-Type" content="text/html; chars ...

  10. SqlBulkCopy 参数配置示例

    SqlBulkCopy  做为SQL Server 官方 批量入库类,性能不会太差.针对其参数做了一些测试.   A. 先准备测试场景 ,关于SqlBulkCopyOptions.KeepIdenti ...