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

回答

相關問題