- 技术博客
- 属性选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">动画列表
</h2>
<ul>
<li class="odds" title="kn_jp">名侦探柯南
</li>
<li class="evens" title="hy_jp">火影忍者
</li>
<li class="odds" title="ss_jp">死神
</li>
<li class="evens" title="yi_jp">妖精的尾巴
</li>
<li class="odds" title="yh_jp">银魂
</li>
<li class="evens" title="hm_da">黑猫警长
</li>
<li class="odds" title="xl_ds">仙履奇缘
</li>
</ul>
</div>
<script>
$(function () {
$("h2").css('background', 'gold');
$(".odds").css('background', 'gold');
$("[id!='box']").css('background', 'skyblue');
$("[title^='h']").css('background', 'green');
$("[title$='jp']").css('background', 'orange');
$("[title*='s']").css('background', 'red');
$("li[class][title*='y']").css('background', 'black');
})
</script>
</body>
</html>
