CSS weight and priority

first question

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>第1题</title>
		<style type="text/css">
			div div{
     
      
				color:blue;
			}
			div{
     
     
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					试问这行字体是什么颜色的？
				</div>
			</div>
		</div>
	</body>
</html>

Second question

<!DOCTYPE>
<html>
	<head>
		<title>第2题</title>
		<style type="text/css">
			#father{
     
     
				color:red;
			}
			p {
     
     
				color:blue;  
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色的？</p>
		</div>
	</body>
</html>

Third question

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            div div div div div div div div div div div div{
     
         
                color:red;
            }
            .me {
     
       
                color:blue;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div class="me">
                                                        试问这行文字是什么颜色的
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Fourth question

<!DOCTYPE>
<html>
	<head>
		<meta content="text/html;charset=utf-8" />
		<title>第4题</title>
		<style type="text/css">
			div p {
     
        
				color:red;
			}
			#father {
     
     
				color:red;
			}
			p.c2{
     
         
				color:blue;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

Fifth question

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
		<style type="text/css">
			.c1 .c2 div{
     
       
				color: blue;
			}
			div #box3 {
     
       
				color:green;
			}
			#box1 div {
     
      
				color:yellow;
			}
		</style>
	</head>
	<body>
		<div id="box1" class="c1">
			<div id="box2" class="c2">
				<div id="box3" class="c3">
					文字
				</div>
			</div>
		</div>
	</body>
</html>

Sixth question

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>第6题</title>
		<style type="text/css">
			#father #son{
     
      
				color:blue;
			}
			#father p.c2{
     
      
				color:black;
			}
			div.c1 p.c2{
     
       
				color:red;
			}
			#father{
     
     
				color:green !important;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p id="son" class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

Detailed

CSS priority (emphasis)

concept:

When defining CSS styles, it often appears that two or more rules are applied to the same element. At this time,
- If the selectors are the same, the cascade is performed
- Different selectors will cause priority issues.

1). Weight calculation formula

Regarding CSS weights, we need a set of calculation formulas to calculate, this is CSS Specificity (specificity)

Label selector	Calculation weight formula
Inherit or *	0,0,0,0
Each element (tag selector)	0,0,0,1
Each class, pseudo class	0,0,1,0
Each ID	0,1,0,0
Each line style style=" "	1,0,0,0
Every !important important	∞ infinity

The value is from left to right, the largest on the left, the first level is greater than the first level, there is no base between the digits, and the levels cannot be surpassed.
Regarding CSS weights, we need a set of calculation formulas to calculate, this is CSS Specificity (specificity)
div {
color: pink!important;
}

2). Overlapping rights

We often use intersection selectors, descendant selectors, etc., which are composed of multiple basic selectors, so at this time, weight overlap will occur.

Is a simple addition calculation

div ul li -------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -------> 0,0,1,1
.nav a ------> 0,0,1,1

note:

There is no base between the digits. For example: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0,0, 1, 0, so there will not be 10 divs. Catch up with a class selector situation.

3). The inherited weight is 0

This is not difficult, but it is easy to get confused by ignoring. In fact, when we modify the style, we must see if the label is selected.

1) If it is selected, the weight is calculated by the above formula. Who listens to whom.
2) If it is not selected, then the weight is 0, because the inherited weight is 0.

answer:

Question 1: blue
Question 2: blue
Question 3: blue
Fourth question: blue
Question 5: yellow
Sixth question: blue

*Disclaimer: This article is organized on the Internet and by the author. The copyright belongs to the original work. If you infringe on rights, please contact the author to delete it.