为什么我的 CSS 代码不适用于元前端分配？答案

【问题标题】：Why isn't my CSS code not working for Meta Frontend Assignment?为什么我的 CSS 代码不适用于元前端分配？
【发布时间】：2022-08-24 22:30:02
【问题描述】：

这些是说明：

请按照以下分步说明进行操作：

打开styles.css 文件。
为body 元素添加一个CSS 规则，将背景颜色设置为#E0E0E2。
为 h1 元素添加一个 CSS 规则，将文本颜色设置为：#721817。
为 h2 元素添加一个 CSS 规则，将文本颜色设置为：#721817。
为center-text CSS 类添加一个CSS 规则，将文本与center 对齐。
为 ID 为 logo 的 HTML 元素添加 CSS 规则。将其左右边距设置为auto，并将其显示更改为block 元素。
为所有span 元素添加CSS 规则，这些元素是h2 元素的子元素，将文本颜色设置为#FA9F42，并将其字体大小设置为0.75em。

为 ID 为 copyright 的 HTML 元素添加 CSS 规则。将其顶部填充设置为12 像素，将其字体大小设置为0.75em

body{
    background-color:#E0E0E2;
}
h1{
    color: #721817;
}
h2{
    color: #721817;
}
.center-text{
text-align: center;
}
#logo{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#span {
    color: #FA9F42;
    font-size: 0.75em;
}
#copyright {
    padding-top: 12px;
    font-size: 0.75em;
}

究竟是什么不工作？请提供minimal reproducible example
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如它目前所写的那样，很难准确地说出你在问什么。

标签： css

【解决方案1】：

为作为 h2 元素的子元素的所有 span 元素添加 CSS 规则，将文本颜色设置为 #FA9F42 并将其字体大小设置为 0.75em。

在您的 css set #span 中，但在您的作业中需要为 h2 中的所有跨度设置
h2 span { color... }

【讨论】：

这是我需要根据评分者修复的...字体大小为 0.75em

【解决方案2】：

我想到了！！

使用这个你会得到 100%

h2 > 跨度{ 颜色：#FA9F42；字体大小：0.75em }

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

我也有完全一样的问题。 73% 我无法通过它。

body {
    background-color: #E0E0E2;
}

h1 {
    color: #721817;
}

h2 {
    color: #721817;
}

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

#logo {
    margin: auto;
    display: block;
}

h2 span {
    color: #FA9F42;
    font-size: 0.75em
}

#copyright {
    padding-top: 12px;
    font-size: 0.75em;
}
´´´

【讨论】：

【解决方案4】：

body{
background-color:#E0E0E2;
 }

h1{
color: #721817;
 }

h2{
color: #721817;
}

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

#logo{
margin-left: auto;
margin-right: auto;
display: block;
}

h2 > span {
color: #FA9F42;
font-size: 0.75em;
}

#copyright {
padding-top: 12px;
font-size: 0.75em;
 }

span 是 h2 的子代，因此必须这样做 h2 > span

【讨论】：

【解决方案5】：

所有测试用例通过

body{
    background-color:#e0e0e2;
}
h1{
    color: #721817;
}
h2{
    color: #721817;
}
.center-text{
text-align: center;
}
#id{
    display: block;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
 }
h2 > span{ 
    color: #fa9f42; 
    font-size: 0.75em 
}
#logo{
margin-left: auto;
margin-right: auto;
display: block;
}

<!DOCTYPE html>
<html>
<head>
    <title>Little Lemon</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <img src="logo.png" id="logo">
    </div>
    <div class="center-text">
        <h1>Our Menu</h1>
        <h2>Falafel <span>NEW</span></h2>
        <p>Chickpea, herbs, spices.</p>
        <h2>Pasta Salad</h2>
        <p>Pasta, vegetables, mozzarella.</p>
        <h2>Fried Calamari</h2>
        <p>Squid, buttermilk.</p>
    </div>
    <div class="center-text">
        <p id="copyright">
            Copyright Little Lemon
        </p>
    </div>
</body>
</html>

【讨论】：

【解决方案6】：

这个答案是正确的，但为什么呢？ ">" 运算符代表什么？

h2 > 跨度 { 颜色：#FA9F42 字体大小：0.75em }

【讨论】：

**所有测试用例通过**

所有测试用例通过