hjood
2015-10-23 08:51
采纳率: 50%
浏览 1.4k
已采纳

前辈,请问下面的代码怎么解释?

前辈 请问下面的代码怎么解释?
原地址
http://www.w3school.com.cn/tiy/t.asp?f=jquery_parent

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

</body>
</html>

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • TangKai_java 2015-10-23 09:00
    已采纳

    给所标签的父标签加一个样式,红色字体,红色边框。

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • chwrYy 2015-10-23 09:11

    div class="ancestors"

    评论
    解决 无用
    打赏 举报
  • chenlxhf 2015-10-23 09:31
    $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); });

    JS 代码的意思是给所有span标签的添加一个红色2px的边框,字体颜色变红

    评论
    解决 无用
    打赏 举报
  • hjood 2015-10-23 09:43

    前辈,还有一点不懂是,

     <style>
    .ancestors *
    { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
    }
    </style>
    

    为什么打一个*,且打和不打屏显效果不同

    
    
    评论
    解决 无用
    打赏 举报
  • chenlxhf 2015-10-25 08:09

    css里的 * 是通配符 意思就是所有的标签

    .ancestors * 意思就是样式ancestors下的所有标签都参照这个样式

    懂了吗?

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题