Мой код работал правильно, пока я не проверил CSS3-проверку, которая сказала мне, что мне нужно переместить строку кода шрифта @import на первую строку в файле стиля css. Когда я сделал это, я понял, что выбранные веб-шрифты не отображаются, поэтому я установил все размеры и т. Д., Чтобы лучше отображать страницы с выбранными шрифтами.
Хотя я не могу понять эту последнюю причуду. Цвет p a: link, a: посещенный синий не отображается в тегах p, за исключением одного места в области сноски (сноска № 6)! Другие ссылки в тегах p выбирают белый цвет из стиля вставки контейнера. Я понимаю, что последний стиль имеет приоритет над предыдущими, но селекторы отличаются, поэтому я не понимаю, почему это происходит.
Я очистил кеш, пробовал разные браузеры, пытался изменить цвета для каждого из стилей ссылки, но если я изменил его, чтобы исправить текст абзаца, то в итоге он также изменил стили ссылки на контейнер вставки.
Вы можете увидеть проблему на моем CodePen на https://codepen.io/Ovimel/pen/XQjgeg, а CSS показан ниже. Спасибо!
CSS3
/*styling for paragraph text links */
p a {
font-weight: 900;
}
p a:link,
a:visited {
color: #194a76;
text-decoration: underline;
}
p a:hover,
a:active {
color: #194a76;
text-decoration: underline;
}
/* styling for colored page inserts from xopixel dot com */
#fullwidth-insert {
padding: 30px 0;
background: #7d654b;
text-align: center;
color: #fff;
font-family: "Carme", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.insert-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}
.insert-heading {
margin: 0;
font-size: 2rem;
font-weight: 300;
padding-bottom: 1rem;
letter-spacing: 0.08rem;
}
/* styling for full-width insert heading links */
.insert-heading a {
color: #fff;
font-family: "Days One", sans-serif;
font-weight: 300;
text-decoration: underline;
}
.insert-heading a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/* styling for full-width insert paragraph links */
.insert-container p a:link,
a:visited {
color: white;
font-weight: 700;
text-decoration: underline;
}
.insert-container p a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/*styling for footnotes*/
p.footnote {
font-size: 0.8em;
/*10 pt 13px */
}