Hola, aquí estoy usando tres enlaces externos en la sección principal en la que un enlace css ha comentado que el enlace css que estoy tratando de llamar después de que el documento esté listo.
Aquí mi pregunta es que tengo algunos nombres de clase iguales en el enlace CSS principal y en el enlace al que también llamo a través de Jquery. Pero mientras se ejecuta el código, si tiene el mismo nombre de clase común en el encabezado y en el enlace Consulta, se aplican estilos de encabezado y no se anula la clase CSS a la que llamo a través de Consulta. Si es un nombre de clase único, entonces se aplican los estilos. Quiero cargar CSS que está pasando por Query con anular el nombre de clase común del enlace principal.
CÓDIGO DE MUESTRA:
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="..New folder\layout.css"> <link rel="stylesheet" type="text/css" href="..New folder\bootstrapfile.css"> <!--<link rel="stylesheet" type="text/css" href="..New folder\externalfile.css"> --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript"> var LoadCss = function(cssFile){ alert('Loading css file '+cssFile); //console.log('Loading css file '+cssFile); var cssLink = document.createElement('link'); cssLink.rel = 'stylesheet'; cssLink.href = '../'+cssFile; var head = document.getElementsByTagName('head')[0]; head.parentNode.insertBefore(cssLink, head); }; $(document).ready(function(){ LoadCss('New folder/externalfile.css'); }); </script> </head> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>