无法将css应用于iframe (标签本身)
我有一个内容编辑器，使用这个编辑器，我希望用户能够保存到外部域的链接，并将其显示为iframe。
iframe出现了，但是当我尝试将CSS规则应用于iframe (不是iframe中的内容，标签本身)时，无论我做什么，它都不起作用，规则甚至不会出现在开发人员控制台中。我在同一张纸上有更多的规则，它们工作得很好。
目前我有以下css：
iframe, .ql-video {
height: 500px !important;
width: 300px !important;
}这是我正在测试的iframe：
<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/GKqEoSiAi90?showinfo=0" data-ss1531946992="1" data-ss1531947568="1"></iframe>但是css根本不会影响它。它没有被禁用或覆盖，只是根本不显示。
如果我将规则添加到element.style，它会按我想要的那样工作，但是我需要在加载iframe时规则在那里。不幸的是，我无法内联它的样式，因为iframe (和其余内容)是以字符串的形式从数据库中检索的。
这就是我检索内容的方式( iframe是其中的一部分)：
this.contentService.getSpecificArticle(this.route.snapshot.queryParams["newsid"]).subscribe( news => {
document.getElementById('main_content').innerHTML = (news as any).content;
...
});我这样做是因为编辑器将内容保存为纯html。
你知道为什么我不能这样设计iframe标签的样式吗？
编辑：我也尝试过插入内容，然后angular清理掉了iframe，还有属性绑定，但内容显示为一个字符串。这就是我使用.innerHTML的原因，但我确实怀疑这可能是因为这个原因，尽管我不确定为什么是这种情况，也不知道我如何解决它。
回答 1
Stack Overflow用户
发布于 2018-07-19 07:27:49
如果您的CSS来自CSS模块，它不会将样式应用于嵌套组件。(这是CSS模块的一个重要特性)。
尝试在你的iframe的CSS前面添加/deep/ (虽然/deep/已经被弃用了，但是你现在应该使用::ng-deep )
/deep/ .ql-video {
height: 500px !important;
width: 300px !important;
}(而且，你并不是真的应该使用/deep/，你应该为那个特定的组件制作CSS，并在那里应用它。)
这里有一些关于Angular的组件样式和‘deep’的信息：https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
https://stackoverflow.com/questions/51411180
复制相似问题