Question

在执行CSS3验证之前，我的代码全部正常工作，该代码告诉我我需要将@import字体代码行移至CSS样式文件的第一行。当我这样做的时候，我当然意识到我没有选择显示的Web字体，因此我固定了所有大小等，以最好地显示带有所选字体的页面。

不过，我似乎无法弄清楚这最后一个怪癖。除了脚注区域中的一个位置（脚注＃6）之外，p标签中未选择p a：link，a：visit蓝色。 p标签内的其他链接从插入容器p a样式中拾取白色。我知道最后一种样式会覆盖以前的样式，但是选择器是不同的，所以我不明白为什么会这样。

我已经清除了缓存，尝试使用不同的浏览器，并尝试更改每种链接样式的颜色，但是如果我更改它以修复段落文本，那么最终也将更改插入容器链接样式。

您可以在https://codepen.io/Ovimel/pen/XQjgeg的CodePen上看到该问题，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 */
}

Answer 1

更高的特异性将击败样式表中的顺序。该选择器：

.insert-container p a:link

具有比这更高的特异性：

p a:link

您可以看到选择器更加具体，因为它针对p div中.insert-container内的链接。有关浏览器如何计算的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

CSS3链接样式未始终一致

1 个答案: