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

如果您可以正确计算specificity，则始终可以选择覆盖样式。

Answer 2

试试这个：

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 0.5em !important;
    font-weight:normal !important;
}

如果它不起作用请小提琴。

Jquery ui-widget css覆盖

2 个答案: