属性选择器
Posted yuanxiangguang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了属性选择器相关的知识,希望对你有一定的参考价值。
<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>
以上是关于属性选择器的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器