简体   繁体   中英

Is CSS going to be disconnected after detach & appendTo in jQuery

Below code is non working code and that does not matter one bit for the purpose of this question. Question below code!

HTML

<body>
  <div class="wrapper">
    <div id="popup1"></div>
  </div>
</body

CSS

.wrapper #popup {
  color: #fff;
}

jQuery

var setpopupoutsidewrapper = $('#popup1');
setpopupoutsidewrapper.detach();
setpopup1outsidewrapper.appendTo('body');

Is the link between the CSS/HTML going to stay intact after the detach/append function?

That CSS selector will no longer apply once popup1 is a child of the body and no longer a child of .wrapper . .wrapper #popup says there is a descendant with id popup1 somewhere below (not necessarily a direct child, use > selector for that) an element with the class wrapper . Once popup1 is a direct child of body that will no longer be true.

As stated in a comment above you can remove the wrapper portion of the selector and it will continue to apply no matter where popup1 is in the hierarchy.

#popup {
  color: #fff;
}

This now only applies to an element with an id of popup1 and none of its ancestors are taken into account.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM