ドロップダウンは、CSSを使用して、内部CSSの位置がスワップされたときにはJavaScriptが動作しない

これはドロップダウンは、CSSを使用して、内部CSSの位置がスワップされたときにはJavaScriptが動作しない

.c1 
    { 
    background-color:red; 
    position:relative; 
    } 
    .c2 
    { 
    background-color:blue; 
    position:absolute; 
    height:50px; 
    width:100px; 
    display:none;} 

.show 
{ 
display:block; 
} 

<body> 
<button class="c1" onclick="myfunction()">click</button> 
<div id="change" class="c2">drop </div> 

<script> 
function myfunction(){ 
document.getElementById("change").classList.toggle("show") 
} 
</script>

しかし、それは動作しません.SHOWと.c2スワップに動作します。

.c1 
{ 
background-color:red; 
position:relative; 
} 
    .show 
{ 
display:block; 
} 

.c2 
{ 
background-color:blue; 
position:absolute; 
height:50px; 
width:100px; 
display:none;} 



<body> 
<button class="c1" onclick="myfunction()">click</button> 
<div id="change" class="c2">drop </div> 

<script> 
function myfunction(){ 
document.getElementById("change").classList.toggle("show") 
} 
</script>

それはので、私は使用していたclassList.toggleのかもしれません。
分割の表示をなしからブロックに変更します。コードの変更は.c2クラスと.showクラスの位置のみです。 cssクラスの順序は重要ですか？

出典

2016-08-31 shadow0359

の値が多分それは奇妙なこと一目に見えるが、あなたはCSSが宣言を注文する方法を考えた場合、それがある、実際には非常に論理的であるよりも優先されます特異性と呼ばれる。すべてのフロントエンド開発者にとって、優秀で広範なguide at MDNを少なくとも一度読んだ方が良いでしょう。ガイドから

：

特異性は、プロパティ値が要素に最も関連していると、それゆえ、適用されるCSSを決めるブラウザするための手段です。特異性は、異なるソートのCSSセレクタで構成されるマッチングルールに基づいています。

たとえば、ドキュメントの一番下の宣言が優先され、これらが優先されます。たとえば、以下の宣言がある場合、背景は青色になります。

body { background: red; } 
... 
body { background: blue; }

しかし、より具体的には、それが重要であり、より具体的な宣言が適用されます。クラス.showを持つ要素はブロック要素として表示されなければならないが、あなたは宣言を持っている場合：

html body { background: red; } 
... 
body { background: blue; }

戻るあなたの例に：だからあなたの背景以下のコードで、最初は少し直感に反するalthoughtは、実際に赤になりますそのクラスのの前に、同じ要素（この場合は.c2）に適用される別のクラスの宣言がある場合は、オーバーライドされます。

.c2.show { display: block; } 
.c2 { display: none; } 

<div class="c2"><!-- This element is hidden --></div> 
<div class="c2 show"><!-- This element is shown --></div>

あなたは、可能な限り、CSS宣言が適用され、時には、なぜそれが不明で作ることができるよう、!importantを避けるために試してみてください、そして、それは、それを上書きすることはより困難です。ただし、より具体的であることによってそれを上書きすることができます。基本的には、ほとんど必要ありません。

出典

2016-08-31 11:48:42 giorgio

tnx !!それは私が知りたいと思ったものです。 – shadow0359

これはw3schoolsがチュートリアルで言及すべきものです。 – shadow0359

nah、あなたはw3schoolsを使うべきではありません...彼らは良いSEOを持っていますが、ときどき誤解され、ほとんど決して完了しません。 MDNを参考にしてください。例やアイデアのためにcsstricksのようなサイト – giorgio

.showと.c2は、矛盾するdisplayプロパティを持っています。ブラウザはスタイル内で最後に見つかった値（トップダウン）を考慮に入れます。

.show{ 
display:block!important; 
}

を試してみて、これはC2

出典

2016-08-31 11:42:27

ありがとうございました！ – shadow0359

'！important'は使わないでください。さて、すぐに修正してみましょう。しかし、コードを回避して回避するようにしてください。さらに読む：http：//james.padolsey。com/css/dont-use-important/ –

私は実稼働環境で重要なことをたくさん使ってきました。 CSSのクラスを組み合わせる方法を制御できない場合があります。特に、JS UIライブラリを使用する場合は、 –

ドロップダウンは、CSSを使用して、内部CSSの位置がスワップされたときにはJavaScriptが動作しない

答えて

関連する問題