2017-01-19 4 views
4

私はそのコアCSSファイルに次のJavascriptた上で動作する内部管理ツールを使用して働いています:私の研究に基づいてユニバーサルCSSセレクタ(*)がインラインスタイルをオーバーライドするのはなぜですか?

* { 
    font-family: Helvetica, Verdana, Arial, sans-serif; 
} 

、これは特異性の最低レベルでしょう。何でもその設定を上書きします。

私の目標は、読みやすさを向上させるためにページ全体のフォントを変更することです。私は、次のインラインHTMLになり、このJavascriptを、とタグのスタイル設定を変更するには、FirefoxでのPython /セレンwebdriverをを使用しています:

document.getElementsByTagName("body")[0].style = "font-family:Lucida Fax;"; 

<body style="font-family:Lucida Fax;" > 

変更がシートに伝播しています。ただし、フォントは変更されません。 「計算」ビューでは、私は以下を参照してください。私は変更を行った後のFirefoxインスペクタで* CSSプロパティを無効にすると

font-family: Helvetica,Verdana,Arial,sans-serif; 
------------------------------------------------ 
*    > Helvetica,Verdana,Arial,sans-serif core.css; 
BODY[1].style > Lucida Fax       element; 

、フォントの変更が発生します。そこで、私はインラインスタイルの変更を無効にしています。

私はエンドユーザーとしてブラックボックス環境にいるため、これは実行中のJavascriptがインラインスタイルよりも先行するように強制する原因となります。

+4

親から継承されたスタイルは '*'より低い優先度を持つ – 4castle

+2

ブラウザは評価するのに費用がかかるので、 '*'セレクタは使用しないでください。ページ全体のフォントを設定する場合は、代わりに継承を使用します。それをCSSの 'body'要素に設定します(' body {font-family:foo;} ')。 – Dai

+0

@Dai私は理解していますが、私は開発者のスタイルシートを扱っているエンドユーザーです。私がソースコードにアクセスできないと仮定してスタイルシートを上書きする方法はありますか? – MavenACTG

答えて

10

<body>タグの「スタイル」プロパティは、本文に直接含まれるコンテンツにのみ影響します。 HTML内のさまざまな<div>および<span>などのタグはすべて、CSSルールと一致します。 (*ルールがなければ、自然な動作はフォント情報を継承することですが、継承はすべてのCSSプロパティでは発生しません)。

代わりに推奨されているのは、すべてを "継承"

body { font-family: Whatever; } 
*, *::before, *::after { font-family: inherit; } 

あなたは(フォームウィジェットまたは任意の様々な種類のような)いくつかの要素のためのオーバーライドを持つことができます:<body>に設定を適用します。

+0

@Dai彼は、一致するCSSルールをオーバーライドしている限り、これを意味します。しかし、文言を改善することができます。 – canon

+1

@Dai DOM内のすべての要素に一致する明示的なCSSルールがない場合は使用しないでください。 (しかし、明確にするために編集されました) – Pointy

+0

私はいくつかの重要な詳細については明らかにされていないかもしれません。私はウェブページのインスタンスを変更しています。私はページを作成しているCSSファイルにアクセスできない。 私はページのインスタンスをオートメーション/スクリプトの位置から変更したいと思っています。私はソースを変更することはできません。 – MavenACTG

関連する問題