如何使父HTML中的样式表链接到子HTML HTML

问题描述：

我有父HTML，我已经将自定义样式表链接到它。父HTML有一个更多的子HTML，通过点击按钮启动它。如何使父HTML中的样式表链接到子HTML HTML

这个孩子的HTML会在使用jQuery插件点击按钮时动态地创建，孩子的HTML将是模式化的，其中嵌入了YouTube视频。

因为我无法访问与它关联的子HTML元素或样式表，因为它是一个动态构建的，所以我如何使用我的自定义样式表覆盖子HTML样式。

<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="jquery-1.11.1.js"></script> 
    <script src="showYTVideo.js"></script> 
    <link href="showYtVideo.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
    <h1>YouTube Modal</h1> 
    <button type="button" class="show-modal">Thumbnail</button> 
    <!-- child HTML will be populated here --> 
    </body> 
</html>

答

对于你的问题如何使样式表中的孩子HTML访问父HTML链接说到“原样”默认情况下。如果将html加载到html中，它将采用父项的样式。

对于第二个问题如何使用我的自定义样式表覆盖子代HTML样式。只需使用accurated选择如下面的例子：

/* OWN styles */ 
 

 
div.one > div.two > p.three > span.four {color: red; font-weight:bold; font-size:1.2em;} 
 

 

 
/* external styles */ 
 

 
p > .four{color:blue; font-weight:normal; font-size: 2rem;}

<div class="one"> 
 
    <div class="two"> 
 
    <p class="three"> 
 
     <span class="four"> 
 
     lalalalala 
 
     </span> 
 
    </p> 
 
    </div> 
 
</div>

正如你所看到的，“外部”的后内（自己的）风格加载，但是，作为我们的CSS选择器更accurated比外部的，我们的生效，忽略别人。（阅读大约CSS priorities）

希望它有帮助！

如何使父HTML中的样式表链接到子HTML HTML

相关推荐