Precedence of the difference between CSS () and addclass in JQ

The author found a conflict between CSS () and ADDCLASSD () when I clicked on a row in the table to add a highlight, the code is as follows:

<style>. SE{background:#FF6500;Color:#fff;}</style><Scripttype= "Text/javascript">        $(function(){            $("tbody>tr:odd"). CSS ("Background-color","#FFF38F"); $("Tbody>tr:even"). CSS ("Background-color","#FFFFEE"); $("tbody>tr"). Click (function(){                $( This). addclass ("se"). Siblings (). Removeclass ("SE"). End (). Find (': Radio'). attr ('checked', true);    })            }); </Script>

From the logic of the code alone, there is no mistake. The font color did change after the click, but the background color did not change. It's supposed to be in order, and the last style will overwrite the same style as before. Actually not.

What is this for? First, analyze it from the perspective of priority.

We know that when the same style rules apply to the same element at the same time as the outer style, inner style, and inline styles, the priority is as follows:
　　external Style < Inner style < inline style (PS: This priority can be implemented correctly in most cases, but it needs to involve the calculation of weights)

The 1..addClass () method is by adding the class name, so the style is defined in the external file or internal style, and then appended to the element when needed;

2. The inline style is handled by the. CSS () method, which is attached directly to the element through the style property of the element;

Therefore, the style property set by the. CSS method takes precedence over the. AddClass method, and the class name you add when clicked cannot override the style of the CSS () setting.

Precedence of the difference between CSS () and addclass in JQ