<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> /* 属性选择器 */ a[title] { color: red; font-size: 12px; } input[type=text] { color: pink; } /* class^ = 字符A 表示 字符A处于开始位置可以匹配 class $ = 字符B 表示 字符B 处于结束位置都可以匹配 class *= 符C 表示 字符C 处于任何位置都可以匹配 */ li[class^=Time] { color: pink; text-shadow: 2px 2px 4px red; font-size: 18px; } li[class$=cat] { color: yellowgreen; font-size: 14px; } li[class*=A] { color: red; font-size: 35px; } </style> </head> <body> <!-- 多媒体标签 --> <!-- audio ogg,mp3 ,wav 等音频格式--> <a href=""> 我是一只猫</a> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul> <li class="Time01">Time01</li> <li class="Time02">Time02</li> <li class="Time03">Time03</li> <li class="Time04">Time04</li> <li class="Time05">Time05</li> <li class="Time06">Time06</li> <li class="Time07">Time07</li> <li class="Time08-cat">Time08</li> <li class="Aime09-cat">Time09</li> <li class="Aime10">Time10</li> </ul> <ul> <li class="A-cat-B">陌舞流沙的年华，在指尖倾泻</li> <li class="cat-A-B">陌舞流沙的年华，在指尖倾泻</li> <li class="cat-A">陌舞流沙的年华，在指尖倾泻</li> <li class="A-B-cat">陌舞流沙的年华，在指尖倾泻</li> </ul> <a href="" title="1号猫">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="">我是一只猫</a> <a href="" title="12号猫">我是一只猫</a> <input type="text" value="我是一只猫"> <input type="text" value="我是一只猫"> </body> </html>