↗☻【选择器】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> /* 通配选择符 */ * { margin: 0; padding: 0; } /* 类型选择符 */ ul { list-style: none; } /* * 属性选择符 * [attribute] 用于选取带有指定属性的元素 IE6不支持 * [attribute=value] 用于选取带有指定属性和值的元素 IE6不支持 * [attribute~=value] 用于选取属性值中包含指定词汇的元素 IE6不支持 * [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词 IE6不支持 * [attribute^=value] 匹配属性值以指定值开头的每个元素 IE6不支持 * [attribute$=value] 匹配属性值以指定值结尾的每个元素 IE6不支持 * [attribute*=value] 匹配属性值中包含指定值的每个元素 IE6不支持 */ a[href] { border: 2px dotted #f00; } a[href="1"][class="link link1"] { border: 2px dotted #0f0; } a[class~="link2"] { border-color: #00f; } a[href|="3"] { border-width: 4px; } a[href^="3-"] { border-width: 6px; } a[href$="-4"] { border-width: 4px; } a[href*="-"] { border-width: 2px; } /* 包含选择符 */ ul a { margin-left: 10px; } /* 子选择符 IE6不支持 */ .list > li { margin-left: 10px; } /* ID选择符 */ #list1 { margin-left: 10px; } /* 类选择符 */ .list { margin-top: 10px; } /* 选择符分组 */ .link1, .link2, .link3 { background-color: #ddd; } /* 相邻选择符 IE6不支持 */ .link1 + * { background-color: #ff0; } </style> </head> <body> <div> <ul class="list" id="list1"> <li> <a class="link link1" href="1">1</a> <ul> <li>11</li> </ul> <p>12</p> </li> <li><a class="link link2" href="2">2</a></li> <li><a class="link link3" href="3-4">3</a></li> </ul> </div> </body> </html>