覆盖外部java脚本文件的css属性无法正常工作

Question

我正在尝试覆盖外部java脚本文件中元素的样式。

如果我将此代码粘贴到本地文件中：

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
<noscript><a href="http://polldaddy.com/poll/6343621/">New Poll</a></noscript>

<style>
.pds-links {
    display: inline !important;
}
</style>

并在Google Chrome中运行我在类'.pds-links'上检查时收到此错误：

css属性是正确的，因为当我在小提琴中运行此代码时，所有元素都显示为内联： http://jsfiddle.net/YsEmj/

如何成功覆盖.pds-links样式的'display'属性？出现这种情况的原因是在将.css属性应用到它之前加载了javascript文件，如果是这种情况，我是否需要使用jQuery来更新样式？

Answer 1

民意调查脚本正在style的末尾添加head标记。如果样式表在它之前，并且它们的样式也指定了!important，它将覆盖您的样式。

这是脚本添加的垃圾：

<style type="text/css" id="poll_style6343621">#PDI_container6343621 .pds-box{font-family: Helvetica, Arial, sans-serif;background: #fff;border: 1px solid #ccc;width: 300px;font-size: 12px;text-align: left;color: #4e4e4e;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;} #PDI_container6343621 .pds-box A{outline: none;} #PDI_container6343621 .pds-clear{display: block;clear: both;} #PDI_container6343621 .pds-box-outer{padding: 12px;} #PDI_container6343621 .pds-question-top{font-size:14px;line-height: 120%;color: #333;font-weight: bold;padding: 5px 0px 15px 0px;position:relative;} #PDI_container6343621 .pds-answer{padding: 10px 0px 10px 0px;border-top: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;} #PDI_container6343621 .pds-answer label{color: #333;font-size: 13px;line-height: 150%;position: relative;} #PDI_container6343621 .pds-answer-group{display: block;padding: 8px 0px 8px 0px;} #PDI_container6343621 .pds-answer-group BR{display: none;} #PDI_container6343621 .pds-answer-input{display: block;float:left;width: 25px;} #PDI_container6343621 .pds-input-label{display: block;float:left;width: 245px;cursor: pointer;} #PDI_container6343621 .pds-answer-other{padding: 0px 0px 0px 10px;} #PDI_container6343621 .pds-textfield{background: #FFF;border: 1px solid #d1d1d1;font-size: 12px;padding: 2px;width: 150px;} #PDI_container6343621 .pds-answer-other BR{display: none;} #PDI_container6343621 .pds-other-label{display: block;float:left;cursor: pointer;} #PDI_container6343621 .pds-feedback-group{display: block;padding: 8px 0px 8px 0px;} #PDI_container6343621 .pds-feedback-label{display: block;padding: 0px 0px 5px 0px;} #PDI_container6343621 .pds-feedback-result {float:right;} #PDI_container6343621 .pds-answer-text {float:left} #PDI_container6343621 .pds-feedback-per{font-weight: bold;} #PDI_container6343621 .pds-feedback-votes{font-weight: normal;} #PDI_container6343621 .pds-answer-feedback {background-color: #f1f1f1;border: 1px solid #d1d1d1;position: relative;} #PDI_container6343621 .pds-answer-feedback-bar {font-size: 2px;background: #3478e3;height: 18px;} #PDI_container6343621 .pds-vote {padding: 10px 0px;} #PDI_container6343621 .pds-votebutton-outer {} #PDI_container6343621 .pds-vote BR{display: none;} #PDI_container6343621 .pds-vote-button {color: #464646;padding: 3px 25px;white-space: nowrap;background:#F2F2F2 url(http://s3.wordpress.com/wp-admin/images/white-grad.png) repeat-x scroll left top;-webkit-border-radius: 11px;-moz-border-radius:11px;border-radius: 11px;border: 1px solid #999;cursor: pointer;font-size: 12px;font-family: "Lucida Grande",Verdana,Arial;text-decoration: none;line-height: 25px;font-weight: bold;white-space: nowrap;} #PDI_container6343621 .pds-vote-button:hover{border: 1px solid #333;} #PDI_container6343621 .pds-vote-button-load {color: #464646;padding: 3px 25px;white-space: nowrap;-webkit-border-radius: 11px;-moz-border-radius:11px;border-radius: 11px;border: 1px solid #999;cursor: pointer;font-size: 12px;font-family: "Lucida Grande",Verdana,Arial;text-decoration: none;line-height: 25px;font-weight: bold;white-space: nowrap;background:#EEE url(http://i.polldaddy.com/polls/vote-loader-eeeeee.gif) no-repeat scroll 50% 50%;} #PDI_container6343621 .pds-vote-button-load SPAN{visibility: hidden;} #PDI_container6343621 .pds-links {padding: 10px 0px 0px 0px;display: block;text-align: center;} #PDI_container6343621 .pds-links-back {padding: 10px 0px 0px 0px;display: block;text-align: center;} #PDI_container6343621 .pds-links A {font-family: Helvetica, Arial, sans-serif;font-size:12px;color: #4e4e4e;text-decoration: none;padding: 0px 4px 0px 4px;line-height: 24px;display: inline-block;font-weight: bold;} #PDI_container6343621 .pds-links-back A {font-family: Helvetica, Arial, sans-serif;font-size:12px;color: #4e4e4e;text-decoration: none;padding: 0px 4px 0px 4px;line-height: 24px;display: inline-block;font-weight: bold;} #PDI_container6343621 .pds-links A:hover {text-decoration: underline;} #PDI_container6343621 .pds-links-back A:hover {text-decoration: underline;} #PDI_container6343621 .pds-comments SPAN{font-weight: normal;} #PDI_container6343621 .pds-total-votes{padding: 10px 0px 0px 0px;position: relative;} #PDI_container6343621 .pds-total-votes SPAN{font-weight: bold;} #PDI_container6343621 div {margin:0;padding:0;}</style>

Answer 2

我通过覆盖样式生成的所有值来实现此功能。该脚本生成此样式：

.pds-links {padding: 10px 0px 0px 0px;display: block;text-align: center;}

使用此样式会导致所有项目以内嵌方式显示：

.pds-links {padding: 10px 0px 0px 0px;display: inline !important; text-align: center;}

当我只是覆盖显示属性时，我不确定为什么样式不会被利用：.pds-links { display: inline !important; }我可以单独提出一个问题来解决这个问题。