设置Twitter提要样式 - CSS不会以.timeline-Tweet-text为目标
我正在使用以下代码将Twitter Feed引入我的网站,该代码在https://publish.twitter.com/上有所描述
<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Feed正确显示.然而,它使用通过Twitter提供的CSS.
当我使用Chrome开发工具检查它时,我可以在推文周围看到以下类:
<p class="timeline-Tweet-text" lang="en" dir="ltr">
所以我认为这将是一个简单的例子,在CSS中将其作为目标,例如
.timeline-Tweet-text {
}
但是,这不适用于推文的任何样式.为什么不？
我也在这里提到了Twitters的指导https://dev.twitter.com/web/overview/css,但这也行不通.
我想要这样做的唯一原因是小部件中使用的字体body与我网站上其他文本使用的字体相匹配.
简单地将样式规则添加到顶级页面将不起作用,因为就浏览器而言,它们是两个不同且隔离的文档.
但是,通过使用kevinburke的Customize Twitter 1.1项目,您应该能够将CSS嵌入到时间轴中.它通过将外部CSS文件的链接直接注入该帧中文档的内容来实现此目的.
在凯文的已发布的例子中,它使所有文本都变白,看起来有点破碎,但是当我拿这个例子并调整它以使背景变红时,我们可以看到它按预期工作,因此你可以做任何调整你喜欢,只要你有一个CSS文件.
请注意,这是唯一可能的,因为Twitter已配置platform.twitter.com为可以嵌入到框架中.出于安全原因,现在许多网站都会发送HTTP响应标头以防止内容框架,以避免人们干扰其内容.
不幸的是（除非最近更改）你无法在 iframe 内操作 CSS
https://jsfiddle.net/tm94g9n4/5/
.timeline-Tweet-text {color: red;}
我将红色添加到文本中，但正如您在检查时看到的那样，它甚至没有显示为被覆盖。它根本没有被引用。
我认为您需要为此查看自定义库。我不能推荐任何东西，因为我以前没有这样做过。
希望能帮助到你
编辑
看来是可能的（重复问题） 如何将CSS应用到iframe？