Best way to disable CSS rule (like Chrome does?)

Best way to disable CSS rule (like Chrome does?)

I have this situation. I'm using bootstrap and jquery-ui in my
application, included in this way:
<link href="bootstrap.min.css" rel="stylesheet" media="screen"/>
<link href="jquery-ui.css" rel="stylesheet" media="screen"/>
<!-- My custom stylesheet -->
<link href="style/style.css" rel="stylesheet" media="screen"/>
When use jquery-ui for open a modal window, I realized that the content
has it's "own" font-family and font-size, because of this rules:
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Verdana,Arial,sans-serif/*{ffDefault}*/;
font-size: 1em;
}
When debugging in Chrome (F12) I can "disable" this rules and gets the
expected result. But I can't figure out how to do it in my custom
stylesheet. I know that this would do the trick:
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
Or I can comment out the rules in the jquery-ui.css file. But I was
looking for a way that, if later I decide to change the "base" font, I
could make the change in one single place and don't modify the jquery-ui
and bootstrap css files How can achieve this? How does the mechanism to
"disable" rules in Chrome works?