https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/はどういうわけか、私は私のメディアクエリーが小さい画面サイズのための私のナビゲーションリンクの色を変更することはできませんメディアクエリー
のためのCSSを上書きすることはできません。白くなるはずですが、画面が大きくなるほど灰色になります。
@media all and (max-width: 580px){
nav li a, nav ul li{
color: white;
text-align: right;
display: block;
}
nav li a {
text-decoration: none;
color: #666666;
font-size: 20px;
}
メディアクエリはセレクタに特異性を追加しません。内部のコードが無視されるかどうかは制御されます。ことを意味
...
@media (condition) {
a selector {
some value
}
}
a selector {
another value
}
は...いつもは、それが後に置かれているため、"別の値"を適用し、同じ特異を持っています。あなたはそれらを反転する必要があり、意図したように、彼らは動作します：
a selector {
another value
}
@media (condition) {
a selector {
some value
}
}
ありがとう、私はあなたがあなたのCSSを注文する方法に注意を払う必要があることを知らなかった、あなただけのJS、感謝の男に必要と思った、それは今働いている – heartcube
CSSの順序は非常に重要です。あなたは特異性を可能な限り低く保ち、適用すべきものが常に最後に読まれるように条件を整理したいと思っています。それが理想です。 –
メディアクエリは、CSSの最下部にあるべきです。 メディアクエリーを最初に定義すると、下の規則的なCSSを定義すると、以前に定義された一度だけ下の一致が上書きされます。
メディアクエリをCSSの下部に配置するのはよくあることです。
あなたのメディアクエリルールが/以下後の定期的なルールでなければなりません。現在のコードではnav li aのメディアクエリルールは104行目です。一般的なルールは162行目です（のメディアクエリルールの後）。そのため、前のルールを上書きしています。
メディアクエリーを一番下に移動するだけで（または一般的なルールの下に1つずつ順番に並べると問題が解決されます）
モバイルの最初のアプローチを使用する必要があります。最初のスタイリングは、モバイルでどのように見えるようにしてから、メディアクエリを使用して580ピクセルになるとスタイリングを変更する必要があります。現在使用しているメディアクエリは、デスクトップクエリよりもメディアクエリがCSSで高いため、オーバーライドされます。また、 '/'を使って、Javascriptコメントである行をコメントアウトしています。 CSSは '/ * * /' – APAD1