html - CSS 未正确更新

Question

我目前正在使用 Drupal 开发一个网站，我正在尝试放置一个自定义的 Twitter block 。这是我的 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;
}

现在由于某种原因，代码无法正确更新或仅适用于一个链接而不适用于所有链接。我检查了 Firebug ，如果我选择元素并在此处禁用/重新启用字体大小:

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

然后它会正确显示该链接。为什么会这样？我没有覆盖正确的属性吗？

更新:

<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;
    }

Answer 1

这只是您的属性选择器实际上不匹配的情况。在实际元素上设置的属性是 style="font-size:85%"，而您在 CSS 中搜索的属性是 style="font-size: 85 %;"(注意额外的空格和分号)。 文本必须完美匹配。

您可以更改选择器以查找正在设置的实际样式属性:

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

See the jsFiddle.

此外，由于这些链接似乎是唯一使用内联样式的链接，您可以只查找样式属性的存在，如下所示:

#twitter_update_list a[style]

由于您使用外部 JavaScript 文件来创建此 HTML，将其修改为使用类可能不是一种选择，尽管这是我最终推荐的。寻找特定样式目前可能可行，但如果 JavaScript 发生变化并且结构不完全相同，它会立即破坏您的 CSS。