Why does the background turn black but the text remains purple (HTML CSS)?

Question

Welcome To Ask or Share your Answers For Others

Why does the background turn black but the text remains purple (HTML CSS)?

asked Jan 29, 2021 in Technique[技术] by 深蓝 (71.8m points)

Why does the background turn black but the text remains purple (HTML CSS)?

For some reason, a black background shows up out of nowhere on the p tags under the div when you put the CSS selector to #div1. If I fix it and change the selector from #div1 to #div1 > h4 like my little tutorial text was explaining, it fixes itself. Why is that? I just need to know if it's a glitch or not. Thanks!

Please advise. Thanks.

body {
}

h2 {
     color: red;
}

p {
     color: pink;
}   

p {
    color: green;
}

p {
    color: purple;
}

.orange > p {
    color:orange;
}

.blue {
    color: blue;
}

#red {
    color: red;
}

#div1 > h4 {
    background-color: black;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
    <title>CSS Basics</title>
    <link rel="stylesheet" type="text/css" href="basics.css">
</head>
<body>
    <p>This is the color purple not pink or green because CSS always takes the selector that is last in the cascade.</p>
    <div class="orange">
        <h1>This will not be orange</h1>
        <p>This will be orange because our selector in CSS for the class="orange" is like this: .orange > p making the h1 unchanged even though it is under the same class="orange" and the p will be the only one that changes to orange text!</p>
    </div>
    <p class="blue">This will be blue.</p>
    <p class="blue">This will also be blue, because you can use classes more than once unlike ID's.</p>
    <p id="red">This is an ID stating it is red.</p>
    <p id="red">This is using the same ID to say it is red, and as you can see it still works. But, be warned, using the same ID to multiple elements is invalid HTML and should be avoided!</p>
    <div id="div1">
        <p>This paragraph is wrapped in a div with the id of "div1" which gives a black background and white text.</p>
        <p>This paragraph is also wrapped in the div with the id of "div1". Notice that neither this paragraph or the paragraph before this one has white text or a black background. This is because we didn't specify in the selector to give p tags white text by using a > symbol between #div1 and p. In fact, it remained purple since that is the last thing applicable that the cascade found to work.</p>
        <h4>This h4 text on the other hand (which is also inside of the div as the other two paragraphs above it) works because we specified it to be #div1 > h4 for its selector. (side note: the two paragraphs above this h4 element do in fact get a black background until we write in #div > h4. I do not know why the text remains purple but the background changed to black...It fixed itself to not having a black background after we wrote in the code "#div1 > h4" so idk what to make of it...) 
        </h4>
    </div>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-01-29T04:14:24+0000

#div1 is the parent of the p elements. This means that some properties (such as background) of #div1 will be applied to the child element(s). However, when you add the > h4 it is specifying that those properties should only apply to the h4 child element of #div1 element. So no, it is not a glitch but is intended CSS behavior.

To note, you have 3 distinct p {} statements, each with a different color...only the final one will be used (because they all have the same specificity) and you can delete the top two.

Categories

Why does the background turn black but the text remains purple (HTML CSS)?

Why does the background turn black but the text remains purple (HTML CSS)?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags