CSS不会影响Div ID

-2

编辑︰我显示整个代码而不是我知道这可能是一个非常简单的问题，但我在HTML5和CSS编码有点新。我遇到的问题是我有一行文本我想单独编辑其他段落，所以我使用Div ID。问题是，CSS与文本链接正确，但是当我将CSS添加到div时，它不会进行编辑。这些都在单独的工作表上，CSS除了Div之外还适用于其他所有工具。下面是HTML和CSS：CSS不会影响Div ID

<!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; 
}

来源

2016-12-31 Ashlee G.

假设你的CSS有一个结束'}'，这段代码工作正常。请提供[最小，完整和可验证示例]（http://stackoverflow.com/help/mcve）。 – Xufox

因为它是一个ID，请确保ID“连接”只出现一次在文件中。它在你给我们的代码片段中完美工作。 – Stardust

你的例子是一个工作的例子。问题必须出现在我们看不到的实际代码中。 – colonelclick

-1

，你可以在你给颜色的文档看DIV不给颜色的P孩或父DIV说明B标签，它是基于标识符，你怎么能给单独的颜色为文本基于ID：

#join p { 
 
    color: SeaGreen; 
 
    }

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

来源

2016-12-31 19:14:37 Harry

好的，所以我试着给你的孩子p标签给颜色，但它仍然不起作用。 –

-1

您必须将代码为 “p” 像这样的：在

 
    #join p{ 
    color: red !important; 
    }

您css在#join之前缺少一个“}”，第二个问题是SeaGreen不可接受，所以我将其更改为红色。

来源

2016-12-31 19:18:08 jpdesign

-1

如果你想让你的孩子元素遗传他们的父母属性，使用！重要。

b, p 
 
{ 
 
    color: inherit !important; 
 
}

来源

2016-12-31 19:18:20

-1

为什么你需要指定#join p是CSS规则“梯级”的特殊性扩大这些答案，原因。我认为你有p的另一种风格规则，这被认为更具体。另一种选择是将您的p颜色规则更改为body颜色规则。

来源

2016-12-31 19:27:20 seport

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

来源

2016-12-31 19:30:13 amarnath

仅有代码的答案没有帮助。请解释您的代码如何解决OP的问题。在这里看起来特别重要的是要区分你的答案和其他似乎吸引downvotes的非常类似的答案。他们做错了什么，你做得对吗？ –

CSS不会影响Div ID

回答

相关问题