Question

这是我正在使用Udacity（交易卡）进行的实验室。提交项目时遇到错误。

说明：2.给有趣的事实<div>一个CSS类animal-info

这是我的HTML代码

#container{
  border: 7.5px solid black;
   padding: 20px;
}
#card{
  border: 5px solid black;
  width: 95%;
  height: 95%;
  padding: 10px;
  margin: 5px;
}

#interesting-fact{
  font-style: italic;
}

.animal-info{
  border: 5px solid black;
  padding: 5px;
  width: 90%;
}

.animal_info{
  font-style: italic;
  border: 5px solid black;
  padding: 5px;
}

ul {
  font-weight: bold;
  list-style: none;
}

h1{
  border: 5px solid black;
  padding: 5px;
}

img{
  border: 5px solid black;
  padding: 10px;
}

#summary{
  border: 5px solid black;
  padding: 5px;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Building the Prototype</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="container">
    <h1>Kitten</h1>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img src="https://placekitten.com/g/200/300" alt="Kitten">
    <div id="card">
      <div class="animal-info"> 
      <p id="interesting-fact"> 
         All kittens are born with blue eyes and will have their fully developed eye color at around 8 weeks old.
      </p></div>
      <ul id="facts">
        <li>
          <span>Scientific Name</span>: Caracal
        </li>
        <li>
          <span>Average Length</span>: 14 to 16 inches
        </li>
        <li>
          <span>Average Lifespan</span>: 15.1 years
        </li>
        <li>
          <span>Habitat</span>: Houses.
        </li>
      </ul>
      <p id="summary">Cats were probably first kept because they ate mice, and this is still their main 'job' in farms throughout the world. Later they were kept because they are friendly and good companions. Their average lifespam is 15.1 years.
      </p>
    </div>
  </div>
</body>

</html>

this is my CSS code

错误是：具有样式的交易卡页面的图像下方有一个类别为'animal-info'的信息部分 #card元素没有类“ animal-info”：期望false等于true

Answer 1

#container{
  border: 7.5px solid black;
   padding: 20px;
}
#card{
  border: 5px solid black;
  width: 95%;
  height: 95%;
  padding: 10px;
  margin: 5px;
}

#interesting-fact{
  font-style: italic;
  
}

#interesting-fact{
  border: 5px solid black;
  padding: 5px;
  width: 90%;
}

#card.animal_info{
  font-style: italic;
  border: 5px solid black;
  padding: 5px;
}

ul {
  font-weight: bold;
  list-style: none;
}

h1{
  border: 5px solid black;
  padding: 5px;
}

img{
  border: 5px solid black;
  padding: 10px;
}

#summary{
  border: 5px solid black;
  padding: 5px;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Building the Prototype</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="container">
    <h1>Kitten</h1>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img src="https://placekitten.com/g/200/300" alt="Kitten">
    <div id="card" class="animal-info" >
       
      <p id="interesting-fact" > 
         All kittens are born with blue eyes and will have their fully developed eye color at around 8 weeks old.
        </p></div>
      <ul id="facts">
        <li>
          <span>Scientific Name</span>: Caracal
        </li>
        <li>
          <span>Average Length</span>: 14 to 16 inches
        </li>
        <li>
          <span>Average Lifespan</span>: 15.1 years
        </li>
        <li>
          <span>Habitat</span>: Houses.
        </li>
      </ul>
      <p id="summary">Cats were probably first kept because they ate mice, and this is still their main 'job' in farms throughout the world. Later they were kept because they are friendly and good companions. Their average lifespam is 15.1 years.
      </p>
    </div>
  </div>
</body>

</html>

Answer 2

也许尝试将CSS中的.animal_info更改为#animal_info？

给个机会吧！

您尝试过吗？试试看，如果它不起作用，让我知道吗？

Answer 3

它是为了给有趣的事实提供一个CSS类的animal-info。您需要将类添加到提到的div中。您有动物信息包装了有趣的事实div。见波纹管

#container{
  border: 7.5px solid black;
   padding: 20px;
}
#card{
  border: 5px solid black;
  width: 95%;
  height: 95%;
  padding: 10px;
  margin: 5px;
}

#interesting-fact{
  font-style: italic;
}

#interesting-fact.animal-info{
  border: 5px solid black;
  padding: 5px;
  width: 90%;
}

.animal_info{
  font-style: italic;
  border: 5px solid black;
  padding: 5px;
}

ul {
  font-weight: bold;
  list-style: none;
}

h1{
  border: 5px solid black;
  padding: 5px;
}

img{
  border: 5px solid black;
  padding: 10px;
}

#summary{
  border: 5px solid black;
  padding: 5px;
}

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Building the Prototype</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="container">
    <h1>Kitten</h1>
    <!-- photo credit: wikipedia.org, image taken by Ritik -->
    <img src="https://placekitten.com/g/200/300" alt="Kitten">
    <div id="card">
      <div class="animal-info"> 
      <p id="interesting-fact" class="animal-info"> 
         All kittens are born with blue eyes and will have their fully developed eye color at around 8 weeks old.
      </p></div>
      <ul id="facts">
        <li>
          <span>Scientific Name</span>: Caracal
        </li>
        <li>
          <span>Average Length</span>: 14 to 16 inches
        </li>
        <li>
          <span>Average Lifespan</span>: 15.1 years
        </li>
        <li>
          <span>Habitat</span>: Houses.
        </li>
      </ul>
      <p id="summary">Cats were probably first kept because they ate mice, and this is still their main 'job' in farms throughout the world. Later they were kept because they are friendly and good companions. Their average lifespam is 15.1 years.
      </p>
    </div>
  </div>
</body>

</html>

this is my CSS code

Answer 4

也许他们正在寻找<div id="card" class="animal-info">？

Answer 5

<div id="card" class="animal-info">

我也遇到了同样的问题，对我来说这很正常。

测试用例因错误而失败

5 个答案: