.ancestors *效果

时间：2023-12-26 17:41:31

<!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>

相关文章