Cascading sex
If the same selector sets the same style, one style will overwrite (overlay) another style that conflicts. Principle of cascade:
- The principle of style collision is the proximity principle, where whichever style is closest to the structure is executed
- Styles do not clash and do not cascade
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
color: red;
}
div {
color: green;
}
</style>
</head>
<body>
<div>
324
</div>
</body>
</html>
Copy the code
inheritance
Inheritance in CSS: Word tags inherit certain styles of their parent tags, such as text color and font size.
- Inheritance, when used properly, can simplify code and reduce the complexity of CSS styling
- Child elements can inherit the style of the parent element (text-,font-,line- at the beginning of these elements can inherit, as well as the color attribute)
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
color: green;
}
</style>
</head>
<body>
<div>
<p>324</p>
</div>
</body>
</html>
Copy the code
Row height inheritance
body {
font:12px/1.5 Microsoft Yahei;
}
Copy the code
- Row height can follow units or not follow units
- If the child element has no row height set, the parent element inherits a row height of 1.5
- The line height of the child element is: the text size of the current child element *1.5
- The biggest advantage of this method is that the inside elements can automatically adjust the line height to match their text size
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
font:12px/1.5 Microsoft Yahei;
}
div {
/*div line height :14 * 1.5 = 21px; * /
font-size: 14px;
}
p {
/*p row height: 20px * 1.5 = 30px; * /
font-size: 20px;
}
</style>
</head>
<body>
<div>Brian Brian</div>
<p>Make more money at the pump</p>
<ul>
<li>Ul does not have the text size of the parent element. Ul does not have the text size of the parent element</li>
</ul>
</body>
</html>
Copy the code
priority
When multiple selectors are specified for the same element, precedence is generated
- If the selectors are the same, cascade is performed
- If the selector is different, it is executed according to the selector weight
The selector weights are shown in the following table.
The selector | Selector weight |
---|---|
Inheritance or * | 0,0,0,0 |
Element selector | 0,0,0,1 |
Class selector, pseudo class selector | 0,0,1,0 |
The ID selector | 0,1,0,0 |
Inline style=”” | 1,0,0,0 |
! important | Up infinity |
Priorities:
- 1. The weight consists of four groups of numbers, but there is no carry
- 2. The class selector is always greater than the element selector, the ID selector is always greater than the class selector, and so on
- 3. Judge the rank from left to right. If the value of one digit is the same, judge the value of the next digit.
- 4. Can simply remember: wildcard and inheritance weight is 0, label selector is 1, class (pseudo-class) selector is 10, ID selector is 100, inline style sheet is 100,! Important infinity
- 5. The inherited weight is 0. If the element is not directly selected, no matter how high the parent weight is, the child weight is 0
Superposition of weights
Weight overlay: If it is a compound selector, there will be weight overlay, need to calculate the weight, directly add to calculate the comparison
- Div ul li —–> 0,0,0,3
- Nav ul li —–> 0,0,1,2
- A: hover — — — — — > 0,0,1,1
- . The nav a — — — — – > 0,0,1,1
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li {
color:red;
}
.pig {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="pig">Big pig hoof</li>
<li>Big elbow</li>
<li>The pig tail</li>
</ul>
</body>
</html>
Copy the code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.nav li {
color:red;
}
/* Pig will not turn green if it is just a pig, because the weight of the pig is not as heavy as the weight of the. Nav li
.nav .pig {
color:green;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pig">Big pig hoof</li>
<li>Big elbow</li>
<li>The pig tail</li>
</ul>
</body>
</html>
Copy the code