子集继承父级的妙用

来源:互联网 发布:聚类算法matlab代码 编辑:程序博客网 时间:2024/06/03 17:14

今天写DEMO发现不设置默认属性,使用parent()设置父级,子集可以继承父级的一些属性,想到案例例如让li和li下的span同时设置红色字体可以简化不少

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box *{
border:2px solid #000;      //这里设置了颜色#000,所以不会被继承
margin:15px;
padding: 5px;
display: block;
//这里没有设置color:#000
}
</style>
</head>
<body>
<div class="box">
<div style="width:300px;">div
<ul>ul
<li>li
<span class="s1">aaa</span>
</li>
</ul>
</div>
</div>
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".s1").parent().css({"color":"red","border":"2px solid red"});
})
</script>
</html>


可以看出.s1的父级li和自己本身都变成了color:red

而之前写死的border:2px solid #000却不会被父级继承

可以理解为一种过滤器

实际应用:留言板,支付列表等

优势:简化代码

0 0
原创粉丝点击