0

私は現在Drupalでウェブサイトを開発していて、カスタムのTwitterブロックを配置しようとしています。これが私のHTMLコードです：

<ul id="twitter_update_list" class="twitter"><li>Twitter feed loading</li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/terryamorin.json?callback=twitterCallback2&amp;count=5"></script>

そして、関連するカスタムCSSは次のとおりです。

#twitter_update_list a {
color: #CA0A6C;
}

何らかの理由で、コードが正しく更新されないか、1つのリンクでのみ機能し、すべてのリンクで機能するわけではありません。私はfirebugをチェックし、要素を選択してここでフォントサイズを無効/再度有効にした場合：

element.style {
    font-size: 85%;
}

次に、その1つのリンクに対して適切に表示されます。なぜこうなった？適切なプロパティをオーバーライドしていませんか？

更新しました：

<div class="content">
<ul id="twitter_update_list" class="twitter">
<li><span>Vote for Cooper in the Fido Casting Call once a day every day! We could have our own UOGC puppy in a commercial !! <a href="http://t.co/bDwdKlQ6">http://t.co/bDwdKlQ6</a></span> <a style="font-size:85%" href="http://twitter.com/UOGreekCouncil/statuses/237535525911793664">about 15 hours ago</a></li></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/uogreekcouncil.json?callback=twitterCallback2&amp;count=1"></script></div>

修繕：

代わりに次のCSSを使用しましたが、機能しているようです。

#twitter_update_list a{
    color: #CA0A6C;
    }
4

1 に答える 1

0

これは、属性セレクターが実際に一致していない場合です。実際の要素に設定されるstyle="font-size:85%"属性はですが、CSSで検索している属性はですstyle="font-size: 85%;"（余分なスペースとセミコロンの追加に注意してください）。テキストは完全に一致する必要があります。

セレクターを変更して、設定されている実際のスタイルプロパティを探すことができます。

#twitter_update_list a[style="font-size:85%"]

jsFiddleを参照してください。

さらに、これらのリンクはインラインスタイルを使用している唯一のリンクであるように見えるため、次のようにスタイル属性の存在を探すことができます。

#twitter_update_list a[style]

外部のJavaScriptファイルを使用してこのHTMLを作成しているため、代わりにクラスを使用するように変更することはおそらくオプションではありませんが、最終的にはそれをお勧めします。今のところ特定のスタイルを探すことはうまくいくかもしれませんが、JavaScriptが変更され、構造がまったく同じでない場合は、CSSがすぐに壊れてしまいます。

于 2012-08-21T04:03:13.063 に答える