2017-05-28 17 views
0

何人かの理由でmy(a)要素のホバーカラーを変更できません。それは何らかの理由でブラウザのデフォルトに固執していますか?なぜ誰かが私に言うことができますか?何らかの理由でリンクの色を変更できませんか?

/* http://meyerweb.com/eric/tools/css/reset/ 
 
    v2.0 | 20110126 
 
    License: none (public domain) 
 
*/ 
 

 
html, 
 
body, 
 
div, 
 
span, 
 
applet, 
 
object, 
 
iframe, 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
blockquote, 
 
pre, 
 
a, 
 
abbr, 
 
acronym, 
 
address, 
 
big, 
 
cite, 
 
code, 
 
del, 
 
dfn, 
 
em, 
 
img, 
 
ins, 
 
kbd, 
 
q, 
 
s, 
 
samp, 
 
small, 
 
strike, 
 
strong, 
 
sub, 
 
sup, 
 
tt, 
 
var, 
 
b, 
 
u, 
 
i, 
 
center, 
 
dl, 
 
dt, 
 
dd, 
 
ol, 
 
ul, 
 
li, 
 
fieldset, 
 
form, 
 
label, 
 
legend, 
 
table, 
 
caption, 
 
tbody, 
 
tfoot, 
 
thead, 
 
tr, 
 
th, 
 
td, 
 
article, 
 
aside, 
 
canvas, 
 
details, 
 
embed, 
 
figure, 
 
figcaption, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
output, 
 
ruby, 
 
section, 
 
summary, 
 
time, 
 
mark, 
 
audio, 
 
video { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 

 
/* HTML5 display-role reset for older browsers */ 
 

 
article, 
 
aside, 
 
details, 
 
figcaption, 
 
figure, 
 
footer, 
 
header, 
 
hgroup, 
 
menu, 
 
nav, 
 
section { 
 
    display: block; 
 
} 
 

 
body { 
 
    line-height: 1; 
 
} 
 

 
ol, 
 
ul { 
 
    list-style: none; 
 
} 
 

 
blockquote, 
 
q { 
 
    quotes: none; 
 
} 
 

 
blockquote:before, 
 
blockquote:after, 
 
q:before, 
 
q:after { 
 
    content: ''; 
 
    content: none; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 

 

 
/* 
 
    ================================= 
 
    Custom Styles 
 
    ================================= 
 
*/ 
 

 
body { 
 
    color: #888; 
 
    font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 

 

 
/* 
 
    ================================= 
 
    Grid 
 
    ================================= 
 
*/ 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.container, 
 
.grid { 
 
    margin: 0 auto; 
 
} 
 

 
.container { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
} 
 

 
.col-1-3 { 
 
    width: 33.33%; 
 
} 
 

 
.col-2-3 { 
 
    width: 66.66%; 
 
} 
 

 
.col-1-3 { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.grid, 
 
.col-1-3, 
 
.col-2-3 { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
} 
 

 
.center-me { 
 
    text-align: center; 
 
} 
 

 

 
/* 
 
    ====================== 
 
    Clearfix 
 
    ====================== 
 
*/ 
 

 
.group:before .group:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.group:after { 
 
    clear: both; 
 
} 
 

 
.group { 
 
    clear: both; 
 
    *zoom: 1; 
 
} 
 

 

 
/* 
 
    ============================== 
 
    Primary Header 
 
    ============================== 
 
*/ 
 

 
.logo { 
 
    text-align: center; 
 
} 
 

 

 
/* 
 
    =============================== 
 
    Typography 
 
    =============================== 
 
*/ 
 

 
h1, 
 
h3, 
 
h4, 
 
h5, 
 
p { 
 
    margin-bottom: 22px; 
 
} 
 

 
h1 { 
 
    color: #a67c00; 
 
    font-size: 24px; 
 
    line-height: 44px; 
 
} 
 

 
h2 { 
 
    font-size: 21px; 
 
    line-height: 44px; 
 
} 
 

 
h3 { 
 
    font-size: 21px; 
 
} 
 

 
h4 { 
 
    font-size: 18px; 
 
} 
 

 
h5 { 
 
    /* \t color: #a9b2b9;*/ 
 
    font-size: 14px; 
 
    /* font-weight: 400;*/ 
 
    strong { 
 
    font-weight: 400; 
 
    } 
 
    cite, 
 
    em { 
 
    font-style: italic; 
 
    } 
 
    /* 
 
    ================================ 
 
    Buttons 
 
    =============================== 
 
*/ 
 
    .btn { 
 
    border-radius: 5px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    } 
 
    .btn-alt { 
 
    border: 1px solid #dfe2e5; 
 
    padding: 10px 30px; 
 
    } 
 
    .primary-nav { 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    letter-spacing: .5px; 
 
    text-transform: uppercase; 
 
    } 
 
    /* 
 
    ================== 
 
    Links 
 
    ================== 
 
*/ 
 
    a:hover { 
 
    color: #a67c00; 
 
    } 
 
    a { 
 
    color: #000000; 
 
    }
<title>Rysh</title> 
 

 
<body> 
 
    <!--header--> 
 

 
    <header class="container center-me"> 
 
    <h1 class="logo">Rysh</h1> 
 
    <nav class="primary-nav"> 
 
     <a href="shop.html">Shop</a> 
 
     <a href="about.html">About</a> 
 
    </nav> 
 
    </header> 
 
</body>

あなたは一番下にCSSでの私の(a)の要素を見ることができ、トップはちょうどCSSが

答えて

6

あなたのCSSに構文エラーがありリセットされます。あなたのH5ルールは適切に閉じられていないため、その後のすべての問題が発生します。

h5 { 
    /* color: #a9b2b9;*/ 
    font-size: 14px; 
/* font-weight: 400;*/ 
strong { 
    font-weight: 400; 
} 

は次のようになります。

h5 { 
    /* color: #a9b2b9;*/ 
    font-size: 14px; 
} 

strong { 
    /* font-weight: 400;*/ 
    font-weight: 400; 
} 
+3

私はdownvoteを無効にしています。私は本当に興味がありますなぜdownvoteがあった、これは完全に有効な答えです。 –

+0

ありがとうございます@MarkoGrešak、私は同じ笑いを疑っていた – hellojebus

+1

これは私がちょうどフィドルでそれを投げた後に見つけた答えです。これにリンクを追加してください:https://jigsaw.w3.org/css-validator/ – sheriffderek

1

あなたがここにあなたのCSSコードの構文間違いをしました:何が欠けている

h5 { 
 
font-size: 14px; 
 
         strong { 
 
         font-weight: 400; 
 
         } 
 
cite, 
 
         em { 
 
         font-style: italic; 
 
         }

?閉じる;-)

"}"


h5 { 
 
font-size: 14px; 
 
        strong { 
 
        font-weight: 400; 
 
        } 
 
cite, 
 
        em { 
 
        font-style: italic; 
 
        } 
 
}

と 'H5' *幸運!

関連する問題