挑战：修复博客页面样式
在这个挑战中，我们提供了一个部分样式的基本博客页面示例。我们需要你修复现有 CSS 中的一些问题，并添加一些样式来完成它。在此过程中，我们将测试你对选择器、盒模型以及冲突/层叠的知识。
起始点
要开始，请点击下方代码面板中的“运行”按钮，在 MDN Playground 中打开提供的示例。然后，按照“项目简介”部分中的说明适当地为页面添加样式。
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sizing a blog page challenge</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>A most excellent blog</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="introduction" class="highlight">
<h2>Our newest post</h2>
<p>
Laoreet lorem curae lectus blandit conubia vel semper laoreet congue
at taciti.
<a href="#">Phasellus hac consectetur iaculis dui</a> sapien iaculis
hac ultricies per luctus. Suscipit mattis lacus semper in porta
phasellus sollicitudin ipsum fermentum phasellus sapien. Inceptos
etiam placerat porttitor finibus auctor at platea hendrerit aenean
laoreet elit lorem odio.
</p>
</section>
<section>
<h2>Exciting content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin
tortor purus <a href="#">platea sit eu id</a> nisi litora libero.
Neque vulputate consequat ac amet augue blandit maximus aliquet
congue. Pharetra vestibulum posuere ornare
<a href="#">faucibus fusce dictumst</a> orci aenean eu facilisis ut
volutpat commodo senectus purus himenaeos fames primis convallis nisi.
</p>
<ul>
<li>Lorem ipsum dolor</li>
<li>Neque vulputate consequat</li>
<li>Phasellus fermentum malesuada</li>
<li>Curabitur semper venenatis</li>
<li>Duis lectus porta mattis</li>
</ul>
<p>
Phasellus fermentum malesuada phasellus netus dictum aenean placerat
egestas amet.
<a href="#">Ornare taciti semper dolor tristique</a> morbi. Sem leo
tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus
mollis nisi mollis enim fermentum laoreet.
</p>
<h2>More exciting content</h2>
<p>
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus.
Primis iaculis elementum conubia feugiat venenatis dolor augue ac
blandit nullam ac <a href="#">phasellus turpis</a> feugiat mollis.
Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu.
Justo torquent pharetra volutpat ad blandit bibendum
<a href="#">accumsan nec elit cras</a> luctus primis ipsum gravida
class congue.
</p>
<p>
Vehicula etiam elementum finibus enim duis feugiat commodo adipiscing
tortor <a href="#">tempor elit</a>. Et mollis consectetur habitant
turpis tortor consectetur adipiscing vulputate dolor lectus iaculis
convallis adipiscing. Nam hendrerit
<a href="#">dignissim condimentum ullamcorper diam</a> morbi eget
consectetur odio in sagittis.
</p>
</section>
<section id="summary" class="highlight">
<h2>Summary</h2>
<p>
Et arcu tortor lorem ac primis ac suspendisse lectus nulla. Habitant
fermentum <a href="#">leo facilisis lobortis</a> risus lobortis
maximus gravida. Euismod fames maecenas imperdiet senectus
<a href="#">nec nisi amet pellentesque felis</a> vitae vestibulum
integer nec tellus. Eros posuere lacinia et tellus quis fames mattis
quisque mauris placerat rhoncus pretium sed consectetur
<a href="#">convallis</a>.
</p>
</section>
</main>
<footer class="highlight">
<p>©️ 2025 Nobody</p>
</footer>
</body>
</html>
css
/* Basic type and text */
body {
font: 1.2em / 1.5 system-ui;
width: clamp(480px, 70%, 1000px);
margin: 0 auto;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
color: red;
}
a:hover {
text-decoration: none;
}
/* Nav menu */
ul {
display: flex;
padding: 0;
list-style-type: none;
justify-content: space-between;
gap: 10px;
}
li {
flex: 1;
}
a {
text-decoration: none;
color: black;
background-color: yellowgreen;
text-align: center;
padding: 10px;
}
a:hover {
background-color: goldenrod;
}
/* Intro and summary */
.highlight {
margin-top: 0;
background-color: darkslategray;
color: cornsilk;
}
.highlight a {
color: purple;
}
/* Footer */
footer {
margin-top: 20px;
background-color: goldenrod;
text-shadow: 1px 1px 1px black;
}
项目简介
你收到的基本博客示例尚未完成，现有代码存在一些问题。请按照以下步骤完成项目。
-
我们希望此页面上的所有元素都使用替代盒模型。向样式表中添加一条规则来实现这一点。
-
导航菜单的规则存在一个问题——样式基本没问题，但它们影响了其他无序列表和内容链接，使它们看起来很糟糕！你能调整这些规则的选择器，使其仅针对导航菜单吗？
-
实际上，导航菜单还有另一个问题——
<a>元素没有像预期的那样完全跨越其<li>父元素。你能调整它们的显示方式，使它们跨越整个宽度吗？ -
对于导航菜单链接和常规内容链接，我们都会设置不同的悬停样式，以便鼠标用户可以看到他们悬停的链接。这对键盘用户来说存在可访问性问题，因为他们看不到这些样式。你能修改相关规则中的选择器，使这些样式也在键盘用户通过 Tab 键聚焦到链接时应用吗？
-
我们希望介绍、摘要和页脚的四周有
20px的内边距。通过在样式表中添加一条声明来实现这一点。 -
添加一条规则，选择第二个二级标题后面的每个段落的第一行，并将其设为粗体。
-
作为对上一个问题的延伸，能否找到一种方法来粗体显示每个二级标题后面的段落的第一行，但仅当父元素不是介绍、摘要或页脚时？你可以通过几种不同的方式来实现，有些方法比其他方法更简洁。
-
在下方，你会看到我们使用
.highlight a来选择介绍和摘要中的<a>元素，并在关联的规则中将它们设为purple颜色。但这不好——颜色对比度太差了。假设不允许更改或删除该规则，你能在此规则上方添加另一条规则，将<a>元素设为yellow吗？由于它在源顺序中位于上方，因此它必须具有更高的特异性。 -
你会看到我们在样式表的底部试图选择
<footer>元素，为其设置文本阴影、一些外边距以将其与摘要分开，以及不同的背景颜色以使其脱颖而出。但是，由于.highlight规则的特异性更高，因此它声明的样式会覆盖，导致它未获得所需的边距和背景颜色样式。你能修改选择器以确保这些样式得到应用吗？
提示和技巧
- 使用 W3C CSS Validator 来捕捉 CSS 中可能被忽略的意外错误，以便您进行修复。
- 您不需要以任何方式修改 HTML。
示例
完成的项目应如下所示
点击此处显示解决方案
完成后的 CSS 如下所示
css
/* Basic type and text */
/* Solution: Set alternative box model on all elements */
* {
box-sizing: border-box;
}
body {
font: 1.2em / 1.5 system-ui;
width: clamp(480px, 70%, 1000px);
margin: 0 auto;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
color: red;
}
/* Solution: Update :hover styles to also apply on :focus
so that keyboard users can see the updated styles when
they tab to links */
a:hover,
a:focus {
text-decoration: none;
}
/* Solution: bold ::first-line of each paragraph that appears
right after a second-level heading, but only when the parent
element is not the introduction, summary, or footer
(use :not(.highlight) to specify this second bit) */
section:not(.highlight) h2 + p::first-line {
font-weight: bold;
}
/*
Alternative to the above solution: bold all instances first,
then remove it from those inside an element with the highlight
class afterwards
section h2 + p::first-line {
font-weight: bold;
}
.highlight h2 + p::first-line {
font-weight: normal;
}
*/
/* Nav menu */
/* Solution: Adjust nav rule selectors to only
target the <nav> menu */
nav ul {
display: flex;
padding: 0;
list-style-type: none;
justify-content: space-between;
gap: 10px;
}
nav li {
flex: 1;
}
nav a {
text-decoration: none;
color: black;
background-color: yellowgreen;
/* Solution: Set nav <a> elements to display: block so they span
the full width of their <li> element parents */
display: block;
text-align: center;
padding: 10px;
}
/* Solution: Update :hover styles to also apply on :focus
so that keyboard users can see the updated styles when
they tab to links */
nav a:hover,
nav a:focus {
background-color: goldenrod;
}
/* Intro and summary */
.highlight {
margin-top: 0;
background-color: darkslategray;
color: cornsilk;
/* Solution: Set 20px of padding on all sides of the
introduction, summary, and footer. They all have the
highlight class set on them */
padding: 20px;
}
/* Solution: Add higher specificity rule above ".highlight a"
rule to override color setting (ID selectors have a higher
specificity than class selectors) */
#introduction a,
#summary a {
color: yellow;
}
.highlight a {
color: purple;
}
/* Footer */
/* Solution: Increase footer rule specificity by adding ".highlight"
so that its margin-top and background-color styles are applied */
footer.highlight {
margin-top: 20px;
background-color: goldenrod;
text-shadow: 1px 1px 1px black;
}