Question

我有父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>

Answer 1

对于您的问题如何将父HTML中的样式表链接到子HTML ，它来了＆＃34;按原样＃34;默认情况下。如果你将html加载到html中，它将采用父项的样式。

对于您的第二个问题如何使用我的自定义构建样式表覆盖子HTML样式。只需使用精确选择器作为以下示例：

＆＃13;

/* 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;}

＆＃13;

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

＆＃13;

正如你所看到的，＆＃34;外部＆＃34;在内部（自己的）样式之后加载，但是，由于我们的CSS选择器比外部更加准确，因此我们生效，忽略其他。（阅读CSS priorities）

希望它有所帮助！

如何使父HTML中链接的样式表可供子HTML使用

1 个答案: