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

元素窗口

样式窗口

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

Answer 1

这完全取决于选择器的特异性.最具体的选择器获胜; 在这种情况下,这是.ui-widget input.

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

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