1. When multiple styles are referenced by the same element, the style attributes in the back row have higher priority.
For example, the following div refers to both styles in [.default] and [.user], where the width attribute in [.user] style replaces the width attribute in [.default] style.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.default{
width: 100px; /* Define width attributes */
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
.user{
width: 150px; /* Here the value of width replaces the value of the previous width */
}
</style>
</head>
<body>
<div class="default user"></div>
</body>
</html>2. When the type of style selector is different, the priority order is: id selector > class selector > label selector.
For example, the following div gets the style corresponding to the id selector and the style corresponding to the class selector, where
The style attribute (width) of id selector [# mydiv] takes precedence over the style attribute (width) of class selector [. user].
The background-color in the class selector [. user] takes precedence over the background-color in the label selector [div].
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#mydiv{
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
.user{
width: 500px; /* #mydiv The width attribute has been defined, where width is invalid */
background-color: #B6E0AE;
}
div{
background-color: #000000; /* .user The background-color attribute has been defined, where background-color is invalid */
}
</style>
</head>
<body>
<div id="mydiv" class="user"></div>
</body>
</html>3. When there is a hierarchical inclusion relationship between tags, descendant elements inherit the style of ancestor elements. If descendant elements define the same style as ancestor elements, the same style attributes of ancestor elements are overwritten. Inherited styles have a lower priority, at least than label selectors
For example, the following child div with id = child inherits part of the style from the parent div with id = parent, and the newly defined style attribute overrides the style attribute of the parent element.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#parent{
width: 100px;
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
#child{
/* Inheritance of width and other attributes of the parent element */
height: 60px; /* Here the height overrides the height attribute of the parent element */
background-color: #A7CCEF; /* The background-color attribute here overrides the background-color attribute of the parent element. */
}
</style>
</head>
<body>
<div id="parent">
<div id="child" style="font-size:12px;">Subelement</div>
</div>
</body>
</html>4. Style attributes with! important tag have the highest priority.
For example, in the style attributes of the div below, the style attributes with the! important tag (width) replace the other (width).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#parent{
width: 100px;
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
#child{
/* Inheritance of width and other attributes of the parent element */
height: 60px; /* Here the height overrides the height attribute of the parent element */
background-color: #A7CCEF; /* The background-color attribute here overrides the background-color attribute of the parent element. */
}
div{
width: 150px !important; /* At this time, the width attribute has the highest priority and will not be overwritten by other width attributes. */
}
</style>
</head>
<body>
<div id="parent">
<div id="child" style="font-size:12px;">Subelement</div>
</div>
</body>
</html>5. When the source of style sheet is different, the priority order is inline style > internal style > external style > browser user-defined style > browser default style.
For example, the following div styles have multiple sources, of which the inline font-size style has the highest priority and the width attribute in the external style has a lower priority than the width attribute in the internal style.
/* main.css file */
#parent {
width: 300px;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="main.css" />
<style type="text/css">
#parent{
width: 100px; /* Here the width attribute replaces the width attribute defined in the main.css file */
height: 100px;
background-color: #B6E0AE;
margin: -50px 0 0 -50px;
position: absolute;
top: 50%;
left: 50%;
}
#child{
height: 60px; /* Override the height attribute of the parent element */
background-color: #A7CCEF;
font-size: 50px;
}
</style>
</head>
<body>
<div id="parent">
<!--inline style font-size Priority ratio <style></style> Medium font-size High priority -->
<!--chrome Browser default font-size At least 12 px，Even if it's set to less than 12 here px，Browser or Display 12 px-->
<div id="child" style="font-size:20px;">Subelement</div>
</div>
</body>
</html>Attachment: How to use jQuery selector to select elements with multiple values in class, such as class= "a b c"?
The class attribute of the following div contains multiple values, which can be found in the following way:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function myClick() {
//Choose by attribute selector
$("[class='ancestor parent child']").css("color", "red");
//List the class names directly to select (the order is interchangeable)
$(".ancestor.parent.child").css("color", "red");
//The same elements can also be found when the order is scrambled.
$(".child.parent.ancestor").css("color", "red");
//Note: Spaces should not be added randomly in the selector (elements after spaces represent descendant elements), such as:
$(".ancestor .parent .child").css("color", "red"); //You can find div
$(".child .parent .ancestor").css("color", "red"); //No element was found
//Select by sequential filtering
$(".ancestor.parent").filter(".child").css("color", "red");
$(".ancestor").filter(".child").css("color", "red");
//You can also use find() to find all descendant elements that satisfy the criteria
$(".ancestor.parent").find(".child").css("color", "red");
$(".ancestor").find(".child").css("color", "red");
}
</script>
</head>
<body>
<form action="http://www.bing.com/search">
<div>
<div class="ancestor parent child">
<div class="child">test0</div>
<span class="child">test1</span>
</div>
<div class="ancestor">test2</div>
<div class="parent">test3</div>
<div class="child">test4</div>
<input type="button" onclick="myClick();" value="click" />
</div>
</form>
</body>
</html>