Question

编辑：我正在展示整个代码我知道这可能是一个非常简单的问题，但我对HTML5和CSS编码有些新意。我遇到的问题是我有一行文本我希望从其他段落单独编辑，所以我使用的是Div ID。问题是，CSS是直接链接到文本，但是当我向div添加CSS时，它不会编辑。它全部在一张单独的表格上，而CSS除了Div之外还可用于其他一切。这是HTML和CSS：

<!DOCTYPE html>
  <html>
    <head>
        <title>Codetopia - Learn to Code</title>
        <link href="externalfile:drive-be6fc3227f0f52098e01c434b3f53296322df648/root/Coding/main.css" type="text/css" rel="stylesheet">
       <link href="https://fonts.googleapis.com/css?family=Lemonada" rel="stylesheet">
    </head>
    <body>
        <h1><i>CODETOPIA</i></h1>
        <h1>Learn to Code the <i>Fun</i> Way</h1>
    <a href="google.com" target="_blank"><img src="http://www.rouzell.net/wp-content/uploads/2016/01/html_css.png" alt="HTML 5 and CSS3 Image"/></a>
    <p>Explore the world of code through this interective course for ages 7-12.</p>
    <p></p>
    <a href=" " target="_blank"></a>
        <h2>Why Codetopia?</h2>
        <p>Codetopia presents a playful, fun, academic atmosphere for young children to discover. <br /> Here are some of the benefits:</p>
         <ul>
             <li><b><i>100% free</b></i> for everyone at any age</li>
          <li>Learn through an interactive storyline</li>
          <li>Simple to follow steps</li>
          <li>Color-coded text</li>
         </ul>
        <img src="https://edsurge.imgix.net/uploads/post/image/7747/Kids_coding-1456433921.jpg" alt="Coding for Kids"/>
<!--<img src="http://codeteachers.com/wp-content/uploads/2016/03/kids-coding.png
" alt="Coding for Kids"/> is optional image-->
    <h2>How it works</h2>
     <p>The teaching process is extremely unique and flexible. Children start with being introduced to a fictional story, that they can read. Throughout the story, certain issues or missions will be needed where the child then will be taught the basis of coding to help the characters. <br /> Here is more in detail:</p>
         <ol>
          <li>Follow Lee and Madison's numerous interactive adventures</li>
          <li>Learn and develop basic coding skills to help the twins throughout the story</li>
          <li>Put your skills to the test to complete each mission and story</li>
             <div id="join">
             <p><b>Join the Codetopia Adventure today!</b></p>
        </div>
             <!-- Pic of the twins here? Make sure to resize it -->
         </ol>
    </body>
</html>



         * {
  font-family: Georgia,Times,serif;
  background-color: White;
}
h1 {
  text-decoration: none;
  font-size: 42px;
  color: rgba(46,139,87,0.9);
  font-family:'Lemonada',cursive;
  line-height: 1em;
}
h2 {
    text-decoration: none;
    font-size: 24px;
    background-color: SeaGreen;
    color: White;
    margin-right: 1100px;
    font-style:italic;
    text-align:center;
    font-family:'Lemonada',cursive;
}
p, li {
    font-size: 18px;
    line-height: 1.5em;
}
li {
    color: rgb(37,232,98);
#join p {
    color: SeaGreen;
}

Answer 1

#join p b {
   color: SeaGreen!important;
}

Answer 2

正如你在文档中看到的那样，你给DIV的颜色没有为父div的子p或b标签赋予颜色，这是基于标识符的，所以你如何根据ID为文本提供单独的颜色：

＆＃13;

#join p {
    color: SeaGreen;
  }

＆＃13;

<div id="join">
         <p><b>Join the Codetopia Adventure today!</b></p>
    </div>

＆＃13;

Answer 3

您必须将代码分配给“p”，例如：

    #join p{
    color: red !important;
    }

在你的CSS中，你在#join之前错过了一个“}”，第二个问题是SeaGreen是不可接受的，所以我把它改成红色。

Answer 4

如果您希望您的子元素能够显示其父元素属性，请使用！important。

＆＃13;

b, p
{
  color: inherit !important;
}

＆＃13;

Answer 5

为了扩展这些答案，您需要指定#join p的原因是CSS规则“特定级联”。我假设您有p的另一个样式规则，它被认为更具体。另一种选择是将p颜色规则更改为body颜色规则。

CSS不会影响Div ID

5 个答案: