html - 样式化 Twitter 提要 - CSS 不会针对 .timeline-Tweet-text

Question

我正在使用以下代码将 Twitter 提要带到我的站点，代码在 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>

提要正确显示。但是它使用通过 Twitter 提供的 CSS。

当我使用 Chrome 开发工具检查它时，我可以在推文周围看到以下类:

<p class="timeline-Tweet-text" lang="en" dir="ltr">

所以我认为在 CSS 中定位这个是一个简单的例子，例如

.timeline-Tweet-text {
}

但是，这不会对推文应用任何样式。为什么不呢？

我在这里也提到了 Twitter 的指导 https://dev.twitter.com/web/overview/css但这也行不通。

我想这样做的唯一原因是小部件中使用的字体与我网站上其余 body 文本使用的字体相匹配。

Answer 1

简单地向顶级页面添加样式规则是行不通的，因为就浏览器而言，它们是两个不同且孤立的文档。

但是，使用 kevinburke 的 Customize Twitter 1.1 project ，您应该能够将 CSS 嵌入到时间轴中。它通过将指向外部 CSS 文件的链接直接注入(inject)该框架内的文档内容来实现这一点。

在凯文的发表example , 它使所有文本变白，看起来有点破损，但是当我拿这个例子并将其调整为也将背景变为红色时，我们可以看到它按预期工作，因此您可以根据需要进行任何调整，只要您有一个 CSS 文件。

请注意，这是唯一可能的，因为 Twitter 已配置 platform.twitter.com 以便它可以嵌入框架中。出于安全原因，如今许多网站都会发送 HTTP 响应 header 以防止内容被框化，从而避免人们干扰其内容。