An example can make things clearer:
Consider a scenario where there are two tables, one of which is assigned a specific class:
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<!-- more rows -->
</table>
<table class="letters">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<!-- more rows -->
</table>
In this case, three rules govern the styling of table rows. The 'letters' table should have red rows, tables without classes should have blue rows, and all rows in every table should turn yellow when the mouse hovers over them. These rules are defined as follows:
table tr {
background-color: #33CCFF;
}
table tr:hover {
background-color: #FAF3B1;
}
table.letters tr {
background-color: #FF8888;
}
However, there seems to be an issue with the application of the hover effect specified by rule #2. When all three rules are present, only the first table (the one without a class) changes color on hover. If we remove the third rule, both tables correctly display blue rows with yellow highlighting on hover.
The presence of rule #3 appears to affect the functioning of rule #2. Despite not mentioning anything about hover pseudoclasses for 'letters' table rows, the general rule for all tables does not seem to apply. The question then arises: why does the existence of rule #3 interfere with the hover behavior defined in rule #2?