jquery.ui.theme.css重写了类的输入样式

Question

使用jquery-1.6.1.min.js和jquery-ui-1.8.13.min.js。

我有一个位于jquery对话框中的文本框

<div class="chat-response">
    <input class="chat-response-textbox" name="chat-response-textbox" placeholder="Type message here">
</div>

我有一些关联的CSS，我已经使字体大小有意大：

.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}

但是，在Chrome / IE中运行时，字体大小不会为20。

在Chrome中我可以看到样式来自jquery.ui.theme.css

元素窗口

样式窗口

为什么在我明确地将一个类分配给输入元素时会发生这种情况？

Answer 1

关于selector specificity的全部内容。最具体的选择器获胜;在这种情况下是.ui-widget input。

只需让你的选择器比那个选择器更具体，它就会起作用：

.ui-widget input.chat-response-textbox
{
    font-size: 20px;
    font-family: Arial;
}

Answer 2

尝试将其更改为

input.chat-response-textbox

这使您的样式更具体，应该覆盖JQuery UI。