<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#text-id {
background-color: green !important;
}
.text-class {
background-color: white !important;
}
div {
font-size: 25px;
margin-top: 30%;
text-align: center;
color: #1d1d69;
font-weight: bold;
background-color: black !important;
}
div {
background-color: white !important;
}
div[text-class],
div[text-id] {
background-color: yellow !important;
}
</style>
</head>
<body>
<div class="text-class" id="text-id" style="background-color:#f13 !important;">
Example of overriding the !important rule.
</div>
</body>
</html>