CSS3的[att$=val]选择器

最新推荐文章于 2025-11-05 20:48:02 发布

最新推荐文章于 2025-11-05 20:48:02 发布 · 170 阅读

文章标签：

#xhtml

本文介绍CSS3中[att$=val]选择器的应用，通过实例展示如何为属性值以特定字符串结尾的HTML元素应用样式。示例包括不同ID属性值的元素，并详细展示了其样式效果。

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、实例结果