Question

比方说我有<input type="text" class="class" id="id">

如果我在style.css中使用这些选择器，则它们不起作用：

input {text-align:center;}
.class {text-align:center;}

但是当我使用这些选择器时，它们可以工作：

input[type='text'] {text-align:center;}
input.class {text-align:center;}
#id {text-align:center;}

这是一个小提琴：http://jsfiddle.net/geoyws/7KRD9/6/

有人可以解释为什么吗？我认为选择器以DOM元素为目标。

Answer 1

在你的小提琴中，你已经加载了jQuery UI，它增加了一些css。因此，你的前两个选择器被这个css覆盖了，但是最后一个选择器比jQuery UI给出的更具体，所以它们被认为更重要。

Answer 2

您似乎遇到了CSS specificity的问题。

它基本上是一个为不同的CSS选择器分配“权重”的系统，以确定将应用哪一个。

例如，＃id选择器比.class选择器更具体（具有更多权重）。因此，如果您的页面上有两个选择器，请执行以下操作：

a { text-decoration: none; }
.mylinks { ... }
#mylink { text-decoration: underline; }

后者将获胜，因为#mylink选择器具有比前者更高的特异性。

如果您希望正确应用样式，请使用更具体的分页。

Answer 3

因为cs中的规范

Here你可以看到＆＃34;重要＆＃34;它会工作。有关此问题的更多信息，请here

/* This doesn't work.*/
input {
    text-align:center;
    background:lime!Important;
}

/* This doesn't work.*/
.class {
    text-align:center;
    background:red!Important;
}

Answer 4

我不明白，为什么这个简单的事情不与你合作？哈维，看看这个

<强> HTML

<input type="text" value="this is demo"/>

<强> CSS

input
{
    text-align:center;
}

/ *这不起作用。* /

.class {
    text-align:center;
    background:red!Important;
}

这是您的fiddle

Answer 5

我一直在玩jsfiddle，我认为这是关于CSS特异性计算的，这里是关于CSS技巧的文章：css specificity

这更像是Alien先生回答的补充。

为什么一些CSS选择器样式<input type =“text”/>？

5 个答案: