਀㰀栀琀洀氀㸀 ਀㰀猀琀礀氀攀㸀 .ancestors * { ਀    搀椀猀瀀氀愀礀㨀 戀氀漀挀欀㬀 border: 2px solid lightgrey;਀    挀漀氀漀爀㨀 氀椀最栀琀最爀攀礀㬀 padding: 5px;਀    洀愀爀最椀渀㨀 ㄀㔀瀀砀㬀 }਀㰀⼀猀琀礀氀攀㸀 ਀㰀猀挀爀椀瀀琀㸀 $(document).ready(function(){਀    ␀⠀∀猀瀀愀渀∀⤀⸀瀀愀爀攀渀琀⠀⤀⸀挀猀猀⠀笀∀挀漀氀漀爀∀㨀 ∀爀攀搀∀Ⰰ ∀戀漀爀搀攀爀∀㨀 ∀㈀瀀砀 猀漀氀椀搀 爀攀搀∀紀⤀㬀 });਀㰀⼀猀挀爀椀瀀琀㸀 ਀㰀戀漀搀礀㸀 ਀㰀搀椀瘀 挀氀愀猀猀㴀∀愀渀挀攀猀琀漀爀猀∀㸀
div (great-grandparent)਀    㰀甀氀㸀甀氀 ⠀最爀愀渀搀瀀愀爀攀渀琀⤀  
  • li (direct parent)਀        㰀猀瀀愀渀㸀猀瀀愀渀㰀⼀猀瀀愀渀㸀
    • ਀    㰀⼀甀氀㸀   
    ਀
    div (grandparent) ਀    㰀瀀㸀瀀 ⠀搀椀爀攀挀琀 瀀愀爀攀渀琀⤀ span਀      㰀⼀瀀㸀 
    ਀㰀⼀搀椀瘀㸀  ਀  ਀㰀栀㈀㸀輀뀉 鰀ꠉ촉꼉 销쬉ꄉ ꠀ뼉급촉ꠉ윉 ꘀ윉븉 뤀눉쬉㨉㰀⼀栀㈀㸀 ਀㰀栀爀 ⼀㸀 ਀㰀瀀爀攀㸀☀氀琀㬀℀䐀伀䌀吀夀倀䔀 栀琀洀氀☀最琀㬀 <html>਀☀氀琀㬀栀攀愀搀☀最琀㬀 <style>਀⸀愀渀挀攀猀琀漀爀猀 ⨀ 笀  display: block;਀    戀漀爀搀攀爀㨀 ㈀瀀砀 猀漀氀椀搀 氀椀最栀琀最爀攀礀㬀 color: lightgrey;਀    瀀愀搀搀椀渀最㨀 㔀瀀砀㬀 margin: 15px;਀紀 </style>਀☀氀琀㬀猀挀爀椀瀀琀 猀爀挀㴀∀栀琀琀瀀猀㨀⼀⼀愀樀愀砀⸀最漀漀最氀攀愀瀀椀猀⸀挀漀洀⼀愀樀愀砀⼀氀椀戀猀⼀樀焀甀攀爀礀⼀㄀⸀㄀㄀⸀㌀⼀樀焀甀攀爀礀⸀洀椀渀⸀樀猀∀☀最琀㬀☀氀琀㬀⼀猀挀爀椀瀀琀☀最琀㬀 <script>਀␀⠀搀漀挀甀洀攀渀琀⤀⸀爀攀愀搀礀⠀昀甀渀挀琀椀漀渀⠀⤀笀 $("span").parent().css({"color": "red", "border": "2px solid red"});਀紀⤀㬀 </script>਀☀氀琀㬀⼀栀攀愀搀☀最琀㬀 <body>਀ <div class="ancestors">਀  ☀氀琀㬀搀椀瘀 猀琀礀氀攀㴀∀眀椀搀琀栀㨀㔀　　瀀砀㬀∀☀最琀㬀搀椀瘀 ⠀最爀攀愀琀ⴀ最爀愀渀搀瀀愀爀攀渀琀⤀ <ul>ul (grandparent) ਀      ☀氀琀㬀氀椀☀最琀㬀氀椀 ⠀搀椀爀攀挀琀 瀀愀爀攀渀琀⤀ <span>span</span>਀      ☀氀琀㬀⼀氀椀☀最琀㬀 </ul> ਀  ☀氀琀㬀⼀搀椀瘀☀最琀㬀 ਀  ☀氀琀㬀搀椀瘀 猀琀礀氀攀㴀∀眀椀搀琀栀㨀㔀　　瀀砀㬀∀☀最琀㬀搀椀瘀 ⠀最爀愀渀搀瀀愀爀攀渀琀⤀    <p>p (direct parent)਀        ☀氀琀㬀猀瀀愀渀☀最琀㬀猀瀀愀渀☀氀琀㬀⼀猀瀀愀渀☀最琀㬀 </p> ਀  ☀氀琀㬀⼀搀椀瘀☀最琀㬀 </div>਀ </body>਀☀氀琀㬀⼀栀琀洀氀☀最琀㬀㰀⼀瀀爀攀㸀 ਀㰀栀爀 ⼀㸀 ਀☀渀戀猀瀀㬀 ਀☀渀戀猀瀀㬀 ਀㰀⼀戀漀搀礀㸀 ਀