1

我正在尝试覆盖外部 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 样式的“显示”属性？发生这种情况的原因是在 .css 属性可以应用于它之前加载 javascript 文件，如果是这种情况，我是否需要使用 jQuery 来更新样式？

4

2 回答 2

1

The poll script is adding a style tag to the end of the head. If your stylesheet comes before it, and their style also specifies !important it will override your style.

Here's the gunk the script is adding:

<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>
于 2012-09-13T16:13:25.180 回答
0

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

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

使用此样式会导致所有项目都显示为 inline ：

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

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

于 2012-09-14T08:50:16.120 回答