Jquery ui-widget css覆盖

Question

我正在使用jquery自动完成,并希望覆盖其中使用的一些CSS样式,但我无法这样做.输入字体大小是1 em,字体:weight是粗体,我不想要.所以我该如何改变字体大小和字体粗细.

这是我要改变的css类.我把所有字体大小都设置为0.5 em,但它没有任何东西.

            /* Component containers
            ----------------------------------*/
            .ui-widget {
                font-family: Verdana,Arial,sans-serif;
                font-size: 0.5em;
            }
            .ui-widget .ui-widget {
                font-size: 0.5em;
            }
            .ui-widget input,
            .ui-widget select,
            .ui-widget textarea,
            .ui-widget button {
                font-family: Verdana,Arial,sans-serif;
                font-size: 0.5 !important;
            }
            .ui-widget-content {
                border: 1px solid #aaaaaa;
                background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
                color: #222222;
            }
            .ui-widget-content a {
                color: #222222;
            }
            .ui-widget-header {
                border: 1px solid #aaaaaa;
                background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
                color: #222222;
                font-weight: bold;
            }
            .ui-widget-header a {
                color: #222222;
            }

Answer 1

首先尝试避免!important在代码中使用,因为这是一种不好的做法.

接下来,您将缺少em单位后面的后缀

font-size: 0.5 !important;
              ^-------------Missing em

应该

font-size: 0.5em !important;
                     ^------- get rid of this

如果可以正确计算特异性,您始终可以选择覆盖样式.