1

外部のjava-scriptファイルの要素のスタイルを上書きしようとしています。

このコードをローカルファイルに貼り付けると：

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

グーグルクローム内で実行すると、クラス'.pds-links'の検査でこのエラーが発生します：

ここに画像の説明を入力してください

このコードをフィドルで実行すると、すべての要素がインラインで表示されるため、cssプロパティは正しいです：http： //jsfiddle.net/YsEmj/

.pds-linksスタイルの「display」プロパティを正常に上書きするにはどうすればよいですか？これが発生している理由は、.cssプロパティを適用する前にjavascriptファイルがロードされているためです。この場合、jQueryを使用してスタイルを更新する必要がありますか？

4

2 に答える 2

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

スタイルによって生成されたすべての値をオーバーライドすることで、これを機能させることができました。スクリプトはこのスタイルを生成します：

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

displayプロパティをオーバーライドしただけでスタイルが利用されない理由がわかりません：.pds-links{ display: inline !important; }これに対処するための別の質問があります。

于 2012-09-14T08:50:16.120 に答える