Geek asks and answers

Cascading CSS, Bottom-up Cascading

I am confused by the way CSS cascades, I thought if you did something like

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.small p {
    color: red;
    font-size: 10px;
}
.big p {
    color: green;
    font-size: 50px;
}


.blue p {
    color: blue;
}
</style>
<title>Insert title here</title>
</head>
<body>
    <div class="small">
        <p>Small</p>
        <div class="big">
            <p>Big</p>
            <div class="small">
                <div class="blue">
                    <p>Blue inside Small</p>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

My problem is “Blue inside small,” I thought it would be a small text, since it has a top class with a “small” class. How can i achieve this.

Please do not tell me to change something, because I am building a complex template system in which you can have containers (div) inside containers (div), and I need a style from the bottom up!

+3
source share
1 answer

You specified the rule .big pafter the rule .small pin your CSS, so the font size will be 50 pixels, not 10, because both selectors have the same specificity.

CSS ( CSS , DOM). , :

  • !important
  • HTML

, , , - , , > ( ):

.big > p {
    color: green;
    font-size: 50px;
}
+4

More articles:


All Articles