在网页上自定义Twitter推文

Question

我想要完成的事情：

当我检查元素并获得适当的类然后应用样式时，似乎没有任何事情发生。为什么是这样？我怎样才能为我的网页更改我的推文样式？

＆＃13;

＆＃13;

.Tweet-header.u-cf{
  display:none !important;
  
}
div#twitter-widget-0 {
    background: orange;
}

＆＃13;

<script src="https://platform.twitter.com/widgets.js"></script>
<blockquote class="twitter-tweet" data-lang="en"><p lang="ro" dir="ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut porttitor elit. Nulla mattis sem et ullamcorper pretium. Nunc malesu</p>&mdash; Jason (@jasontestsus) <a href="https://twitter.com/jasontestsus/status/699685458146623489">February 16, 2016</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

＆＃13;

＆＃13;

＆＃13;

我的小提琴：https://jsfiddle.net/jzhang172/4ewm1hjd/

Answer 1

您可以使用Twitter widget events来检测加载推文的时间，然后根据需要更新CSS：

$(function() {
  twttr.events.bind('loaded', function(event) {
    var $iframe = $(frames['twitter-widget-0']);
    $('#twitter-widget-0', $iframe.contents()).css({
      'background-color': 'orange'
    });
    $('.Tweet-header.u-cf', $iframe.contents()).css({
      'display': 'none'
    });
  });  
});  

您的CSS未应用于推文小部件的原因是小部件位于iframe中，据我所知，iframe将忽略其父document中的CSS规则1}}除非iframe和父document位于同一个域中。