通过不设置默认属性并使用parent()方法，子集可以继承父级的某些属性，如在CSS中实现li和span同时变为红色字体，简化代码编写。此技巧在留言板、支付列表等场景下具有优势，避免了不必要的重复设置。
今天写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却不会被父级继承
可以理解为一种过滤器
实际应用：留言板，支付列表等
优势：简化代码
扫一扫
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
