要素のみのCSSスタイルをリセット/削除


481

これは以前に言及/質問されたはずだと確信していますが、運のない年齢を探していました。私の用語は間違っているはずです!

少し前に見たツイートで、特定の要素のスタイルシートに以前に設定されたスタイルを削除するcssルールが利用可能であることを示唆していたのを漠然と覚えています。

良い使用例は、モバイルファーストのRWDサイトであり、小さな画面ビューの特定の要素に使用されるスタイル設定の多くが、デスクトップビューの同じ要素に対して「リセット」または削除する必要があります。

次のようなものを達成できるCSSルール:

.element {
  all: none;
}

使用例:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: none;
  }
}

したがって、すべてのプロパティを宣言する必要なく、スタイルをすばやく削除または再設定できます。

理にかなっていますか?


5
いいえ、そのようなことは存在しません。要素がルールを介して特定のCSSスタイルを受け取ったら、それを単に「取り戻す」ことはできません。唯一の方法は、すべてのCSSプロパティを目的の値で明示的に上書きすることです。
CBroe 2013

それを行う方法は、メディアクエリでそもそもそれを制限することです
Kevin Lynch


13
そこであるというプロパティallリセットするために提案されているすべての特定のCSS全体の値に指定された要素のCSSプロパティを-あなたが使用する値は次のようになりunset、それがデフォルトで継承する場合は、その継承された値のいずれかにプロパティをリセットするには、またはそれ以外の場合は、その初期値。実装についての言葉はありませんが、誰かがそれについて考えたことを知っておくのは良いことです。
BoltClock

2
all: revertしましょう。私の答えを見てください。@CBroeはい、そんなものが存在しています。
Asim KT

回答:


602

CSS3キーワードinitialは、CSS3プロパティを仕様で定義されている初期値に設定します。このinitialキーワードは、IEおよびOpera Miniファミリーを除いて、幅広いブラウザをサポートしています。

IEのサポートの欠如が問題を引き起こす可能性があるため、ここではいくつかのCSSプロパティを初期値にリセットする方法をいくつか示します。

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

@ user566245のコメントで述べたように:

これは原則として正しいですが、個々の走行距離は異なる場合があります。たとえば、textareaのような特定の要素にはデフォルトで境界線があります。このリセットを適用すると、それらのtextareaの境界線が少なくなります。

[POST EDIT FEB 4、'17]現代の標準、ユーザーJoostになることに賛成

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }
}

W3の例

たとえば、作成者がall:initialを要素で指定すると、カスケードの作成者、ユーザー、またはユーザーエージェントレベルにルールが表示されないかのように、すべての継承がブロックされ、すべてのプロパティがリセットされます。

これは、外部ページのスタイルを継承したくない、ページに含まれる「ウィジェット」のルート要素に役立ちます。ただし、その要素に適用されている「デフォルト」スタイル(たとえば、display:blockなどのブロック要素のUAスタイルシートからのブロック)も吹き飛ばされることに注意してください。


ジャバスクリプト?

cssをリセットするためにcss以外について誰も考えていませんか?はい?

完全に関連するその切り取りがあります:https : //stackoverflow.com/a/14791113/845310

getElementsByTagName( "*")は、DOMからすべての要素を返します。次に、コレクション内の各要素にスタイルを設定できます。

作成14 2月。132013-02-9 20:15 VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

これが言ったすべてで; 私が最後にブラウザで「デフォルト」が設定されている場合、CSSリセットは1つのWebブラウザだけで終了しない限り、実行可能なものではないと思います。

比較のために、ここにDOM操作をトリガーする<blockquote style="all: unset;font-style: oblique">whereのFirefox 40.0値リストを示します font-style: oblique

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

8
原則として正しいと思いますが、走行距離は個人差があります。たとえば、textareaのような特定の要素にはデフォルトで境界線があります。このリセットを適用すると、それらのtextareaの境界線が少なくなります。したがって、本当のリセットではありません。気になっていた特定のプロパティだけに使用してしまいました。*セレクターと組み合わせて、すべての要素をリセットしたり、特定の要素内のすべての要素をリセットしたりすることもできます。
user566245 14

8
@ user566245 *セレクターでこれを適用すると、ブラウザーと子猫が強制終了します。これは真のリセットではありません。真のリセットは存在しません。
Milche Patern

@Milkywayspatterns笑、あなたはおそらく正しいです。私にとっては、リセットして「div#theid *」に適用したい属性のみを取得しました。うまくいけば、これは誰の子猫も殺さないでしょう:)
user566245

1
@ジェレミー:あなたはブラウザのデフォルトを考えています、それは要素ごとに異なります。表示の初期値は、適用される要素に関係なく常にインラインです。
BoltClock

1
@mmmshuddupヒントをありがとう。元の答えを見てみると、CSSのように書き直しました。圧縮については、これは答えであり、コピーと貼り付けのパッチではありません。だよね?
Milche Patern 14

172

将来の読者のために。これは意図したことだと思いますが、現在はあまり広くサポートされていません(以下を参照)。

#someselector {
  all: initial;
  * {
    all: unset;
  }
}
  • ソース)でサポート:Chrome 37、Firefox 27、IE 11、Opera 24
  • サポートされていません:Safari

12
ソース Internet Explorerがサポートされていないことを主張all
Dan Dascalescu、2015

1
ついに。これは、新しく受け入れられた答えになるはずです。
JS_Riddler 2015

2
マイクロソフトは検討中allとしてリストに表示します。Edgeの将来のバージョンはそれをサポートするでしょう。
ケビン

1
「継承されたプロパティでは、初期値は意外かもしれません。代わりに、inherit、unset、またはrevertキーワードの使用を検討する必要があります。また、これはブラウザ固有に戻りますか?この初期イニシャルは.. ...?DDT?
Milche Patern

18
CSSのようにネストされたCSSを見た唯一の場所#someselector { ... * { all: unset; } ... }はSassです。ここではSassについて言及していません-これは新しいCSS3のことですか?「ネストされたCSS」を検索すると、エントリレベルのチュートリアルとSass情報が表示されます。... * { ... } ...ネストされた部分をCSS(HTML5内)に追加すると、ドキュメントが壊れます(子要素は個別に、親に適用したいスタイルを個別に取得します)。
i336_ 2016

34

この問題に対する真新しい解決策があります。

all: revertまたはを使用しall: unsetます。

MDNから:

revertキーワードは、多くの場合unsetとまったく同じように機能します。唯一の違いは、ブラウザまたはユーザーが作成したカスタムスタイルシート(ブラウザ側で設定)によって値が設定されているプロパティです。

「特定の要素のスタイルシートで以前に設定されたスタイルを削除する、利用可能なCSSルール」が必要です。

したがって、要素に次のようなクラス名がある場合remove-all-styles

例えば:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

CSSを使用:

  .remove-all-styles {
    all: revert;
  }

すべてのスタイルが適用されることでリセットされother-classanother-class他のすべてのは継承され、それにスタイルを適用しますdiv

またはあなたの場合:

/* mobile first */
.element {
   margin: 0 10;
   transform: translate3d(0, 0, 0);
   z-index: 50;
   display: block;
   etc..
   etc..
}

@media only screen and (min-width: 980px) {
  .element {
    all: revert;
  }
}

しましょう。

ここでは、あるクールなCSSプロパティと別のクールなCSS値を使用しました。

  1. revert

実際revertには、名前が示すように、そのプロパティをユーザーまたはユーザーエージェントのスタイルに戻します。

  1. all

プロパティで使用するrevertと、allその要素に適用されたすべてのCSSプロパティがユーザー/ユーザーエージェントのスタイルに戻ります。

ここをクリックして、作者、ユーザー、ユーザーエージェントのスタイルの違いを確認してください。

例:埋め込みウィジェット/コンポーネントを、それらを含むページのスタイルから分離したい場合、次のように書くことができます:

.isolated-component {
 all: revert;
}

これにより、すべてauthor styles(つまり、開発者CSS)がuser styles(Webサイトのユーザーが設定したuser-agentスタイル-可能性は低いシナリオ)またはユーザースタイルが設定されていない場合はスタイル自体に戻ります。

詳細はこちら:https : //developer.mozilla.org/en-US/docs/Web/CSS/revert

そして唯一の問題はサポートです:Safari 9.1とiOS Safari 9.3のみがサポートしていますrevertが執筆時点で価値をます。

だから私はこのスタイルを使用し、他の答えにフォールバックすると言います。


2
クールに、残念ながらブラウザのサポートは、まだ穴があります:caniuse.com/#feat=css-all(ただし例えば、caniuseショーよりも小さいall: initialall: unsetMSエッジ16の上に私のために働いていました)。
ロバートKusznier

25

この質問は私にとって数年苦痛のもとであり、問​​題を本当に理解し、解決することがなぜ重要なのかを理解する人はほとんどいないので、この質問に完全に答えましょう。私がCSS仕様に対して責任があるとすれば、率直に言って、過去10年間でこれに対処していなかったことを恥ずかしく思います。

問題

HTMLドキュメントにマークアップを挿入する必要があり、特定の方法で表示する必要があります。さらに、あなたはこのドキュメントを所有していないため、既存のスタイルルールを変更することはできません。スタイルシート何であるか、またはどのように変わるかはわかりません。

この使用例は、不明なサードパーティのWebサイトが使用できる表示可能なコンポーネントを提供する場合です。この例は次のとおりです。

  1. 広告タグ
  2. コンテンツを挿入するブラウザ拡張を作成する
  3. あらゆるタイプのウィジェット

最も簡単な修正

すべてをiframeに配置します。これには独自の制限があります。

  1. クロスドメインの制限:コンテンツは元のドキュメントにまったくアクセスできません。コンテンツのオーバーレイ、DOMの変更などはできません。
  2. 表示制限:コンテンツは長方形の内側にロックされています。

コンテンツボックスに収まる場合は、コンテンツにiframeを書き込んで明示的にコンテンツを設定させることで問題#1を回避できます。これにより、iframeとドキュメントが同じドメインを共有するため、問題を回避できます。

CSSソリューション

私はこれの解決策を広く探し求めましたが、残念ながらありません。あなたができる最善のことは、オーバーライドできるすべての可能なプロパティを明示的にオーバーライドして、それらをあなたが思うようにオーバーライドすることですそれらをデフォルト値であるれる値に。

オーバーライドする場合でも、よりターゲットを絞ったCSSルールによってオーバーライドされないようにする方法はありません。ここでできる最善の方法は、オーバーライドルールのターゲットをできるだけ具体的にして、親ドキュメントが誤ってそれを最適化しないことを期待することです。コンテンツの親要素に不明瞭またはランダムなIDを使用し、すべてのプロパティ値の定義に!importantを使用します。 。


2
最新のすべてのブラウザでサポートされているallプロパティを使用できます
Dan Dascalescu、2015

1
この一般的な問題の適切な解決策は、Webコンポーネント
GetFree

1
これは非常に現実的な問題ですが、そもそも開発が不十分なCSSの結果としてのみ存在します。マークアップとCSSを作成している場合、それを適切に行っていれば、どのスタイルもサードパーティのアプリに流れ込むことはありません。私がCSS仕様の責任者だったとしても、私は当惑することはありませんが、動揺した人々は私が作成したものを残酷に誤用しています。
ESR 2017

@DanDascalescu allプロパティは、「デフォルト」のブラウザのcssスタイルに戻りません。「初期の」CSSスタイルに戻るだけです。違いは、CSSが存在しないかのようにページをスタイルし、もう1つは要素のスタイルを使用することです(つまり、p { color: blue}リセットされません)
Cameron

10

別の方法:

1)Yahoo CSSリセットのcssコード(ファイル)を含め、すべてをこのDIV内に配置します。

<div class="yui3-cssreset">
    <!-- Anything here would be reset-->
</div>

2)または使用


4

ここで正しいとマークされている回答を使用することはお勧めしません。それはすべてをカバーしようとするCSSの巨大な塊です。

ケースごとに要素からスタイルを削除する方法を評価することをお勧めします。

SEOの目的で、実際の見出しがデザインにないページにH1を含める必要があるとしましょう。そのページのナビゲーションリンクをH1にすることもできますが、そのナビゲーションリンクをページ上で巨大なH1として表示したくない場合があります。

あなたがすべきことは、その要素をh1タグで囲み、それを検査することです。特にh1要素に適用されているCSSスタイルを確認します。

要素に次のスタイルが適用されているとしましょう。

//bootstrap.min.css:1
h1 {
    font-size: 65px;
    font-family: 'rubikbold'!important;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

//bootstrap.min.css:1
h1, .h1 {
    font-size: 36px;
}

//bootstrap.min.css:1
h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

//bootstrap.min.css:1
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

//bootstrap.min.css:1
h1 {
    margin: .67em 0;
    font-size: 2em;
}

//user agent stylesheet
h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

次に、H1に適用される正確なスタイルを正確に特定し、CSSクラスでそれらを設定解除する必要があります。これは次のようになります。

.no-style-h1 {
    font-size: unset !important;
    font-family: unset !important;
    font-weight: unset !important;
    font-style: unset !important;
    text-transform: unset !important;
    margin-top: unset !important;
    margin-bottom: unset !important;
    font-family: unset !important;
    line-height: unset !important;
    color: unset !important;
    margin: unset !important;
    display: unset !important;
    -webkit-margin-before: unset !important;
    -webkit-margin-after: unset !important;
    -webkit-margin-start: unset !important;
    -webkit-margin-end: unset !important;
}

これはよりクリーンで、実際に何をしているのか分からないランダムなコードの塊をCSSにダンプするだけではありません。

これで、このクラスをh1に追加できます

<h1 class="no-style-h1">
     Title
</h1>

4

ビルドシステムでsassを使用している場合、すべての主要なブラウザーで機能する方法の1つは、スタイルのインポートをすべて:not()セレクターでラップすることです...

:not(.disable-all-styles) {
  @import 'my-sass-file';
  @import 'my-other-sass-file';
}

次に、コンテナーでdisableクラスを使用できます。サブコンテンツにはスタイルがありません。

<div class="disable-all-styles">
  <p>Nothing in this div is affected by my sass styles.</p>
</div>

もちろん、すべてのスタイルの前に:not()セレクターが付加されるので、少し曖昧ですが、うまく機能します。


1

モバイルファーストサイトについておっしゃっていましたが、レスポンシブデザインでは、小さい画面のスタイルを大きい画面のスタイルでオーバーライドすることは確かに可能です。しかし、必要はないかもしれません。

これを試して:

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

これらのメディアクエリは重複しないため、それらのルールは互いにオーバーライドしません。これにより、スタイルの各セットを個別に維持することが容易になります。


1

より良いソリューション

"コピー/貼り付け"スタイルシートをダウンロードして、CSSプロパティをデフォルト(UAスタイル)にリセットします。
。https //github.com/monmomo04/resetCss.git

ありがとう@Milche Patern!
私は本当にリセット/デフォルトのスタイルプロパティ値を探していました。私の最初の試みは、計算された値をroot(html)要素のブラウザーDevツールからコピーすることでした。しかし、それが計算したように、それはすべてのシステムで異なって見え/働きました。 最後に、これらのプロパティはスタイルを最上位のルート要素のデフォルトスタイルにリセットしますが、各HTML要素の初期値にはリセットしないことに言及しておくのは良いことです。これを修正するために、私はWebkitベースのブラウザーの「ユーザーエージェント」スタイルを採用し、「reset-this」クラスの下に実装しました。
アスタリスク*を使用して子要素のスタイルをリセットしようとしたときにブラウザーがクラッシュした場合、私はそれが機能しないことを知っていたので、代わりにアスタリスク "*"をすべてのHTMLタグ名に置き換えました。 。ブラウザはクラッシュしませんでした。Chromeバージョン46.0.2490.71 mを使用しています。

便利なリンク:


「コピー/貼り付け」スタイルシートをダウンロードして、CSSプロパティをデフォルト(UAスタイル)にリセットします:https :
//github.com/monmomo04/resetCss.git

ユーザーエージェントスタイル:
ブラウザのHTML要素のデフォルトCSS
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Cssの仕様(仕様に注意を払う):https :
//css-tricks.com/specifics-on-css-specificity/

https://github.com/monmomo04/resetCss.git


1

私の特定のシナリオでは、ページの特定の部分に一般的なスタイルを適用することをスキップしたいと思いました。

<body class='common-styles'>
    <div id='header'>Wants common styles</div>
    <div id='container'>Does NOT want common styles</div>
    <div id='footer'>Wants common styles</div>
</body>

(主にルールの優先順位と複雑なスタイルシート階層が原因で)あまり成功しなかったCSSリセットをいじった後、ユビキタスなjQueryを救済に持ち込みました。

$(function() {
    $('body').removeClass('common-styles');
    $('#header,#footer').addClass('common-styles');
});

(ここで、CSSを処理するためにJSを使用することがいかに悪かを教えてください:-))


0

CSSをファイルから削除せずに、実際に要素からのみスタイルを削除する方法を理解しようとしている人のために、このソリューションはjqueryで動作します。

$('.selector').removeAttr('style');

0

クラス内でCSSを設定した場合は、jQueryのremoveClass()メソッドを使用して簡単に削除できます。以下のコードは.elementクラスを削除します:

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

パラメータが指定されていない場合、このメソッドは選択された要素からすべてのクラス名を削除します。


-2

いいえ、これはあなたのCSS構造をよりよく管理する問題です。

あなたの場合、私は次のようなCSSを注文します:

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}

@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

ただ実験してください。


-2

重要なルールを探している可能性はありますか?すべての宣言を取り消すわけではありませんが、それらをオーバーライドする方法を提供します。

「!importantルールをスタイル宣言で使用すると、この宣言は、CSSで行われた他の宣言よりも優先されます。宣言リストのどこにあるかにかかわらず、!importantは特定性とは関係ありません。」

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception


!重要なことは進むべき道ではありません。使用するのは大胆であり、最後の手段としてのみ使用する必要があります(たとえば、プラグインが!importantも使用した場合など)
Maarten Wolfsen 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.