CSS3属性选择器

1、基本介绍

(1)[att*=val]属性选择器

         如果元素用att表示的属性的属性值中包含用val指定的字符,则该元素使用这个样式

(2)[att^=val]属性选择器

         如果元素用att表示的属性的属性值的开头字符为用val指定的字符,则该元素使用这个样式

(3)[att$=val]属性选择器

         如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,则该元素使用这个样式

2、实例说明

<!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属性选择器</title>
<style type="text/css">
   [id*=div3]{
	   background-color:#C00;
   }
   [id^=div2]{
	   background-color:#0F0;
   }
   [id$=div1]{
	   border:1px solid #00F;
	   font-size:42px;
   }
</style>
</head>

<body>
   <div id="div1">
      <p>Hello</p>
   </div>
   <div id="div1_div2">
      <p>您好!</p>
   </div>
   <div id="div1">
      <button>查询</button>
   </div>
   <div id="div2">
       <input id="man" type="radio"/>男
       <input id="woman" type="radio"/>女
   </div>
   <div id="div2_div1">
       <input type="text" value="姓名"/>
   </div>
   <div id="div1_div2_div3">
       <input type="checkbox"/>篮球
   </div>
</body>
</html>
3、实例结果




原文地址:https://www.cnblogs.com/hzcya1995/p/13315596.html