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

使用 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

元素窗口

样式窗口

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

这一切都与 selector specificity有关.最具体的选择器获胜;在这种情况下,是.ui-widget输入.

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

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