如何使父HTML中的樣式錶鏈接到子HTML HTML

-1

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

來源

2016-09-28 Nikhil Bharadwaj

對於你的問題如何使樣式表中的孩子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）

希望它有幫助！

來源

2016-09-28 09:55:07 JoelBonetR

如何使父HTML中的樣式錶鏈接到子HTML HTML

回答

相關問題