Question

我有以下HTML：

<div id="myDiv">
    <div class="myLabel">Test1:</div>
    <div class="myControl"><input type="text" /></div>
    <div class="myLabel">Test2:</div>
    <div class="myControl"><input type="text" /></div>
    <div class="myLabel">Test3:</div>
    <div class="myControl"><input class="short" type="text" /></div>
</div>

以下CSS：

#myDiv {
    width: 680px;
}
.myLabel {
    display: inline-table;
    width: 150px;
    text-align: right;
}
.myControl {
    display: inline-table;
    text-align: left;
    width: 400px;
}
.myControl > .short {
    width: 50px;
}
.myControl > input[type=text] {
    width: 200px;
}

我要做的是让最后一个文本框采用short的CSS样式。相反，它被input[type=text] CSS规则覆盖。我知道我可以简单地在我的!important规则中添加.short并按照我想要的方式开展此工作，但我想知道为什么input[type=text]规则似乎比{.short规则更重要1}}规则，从第一次开始？还有更好的方法吗？

我有fiddle这种行为。

Answer 1

这一切归结为CSS specificity。您可以通过将ID附加到该规则来解决此问题：

#myDiv .myControl > .short {
    width: 50px;
}

<强> jsFiddle example

Answer 2

评分规则：

A(0/1) -> style in-line
B(0/1) -> style associated with id
C(0/1) -> style associated with class
D(0/1) -> style associated with element

得分：ABCD(in binary)

示例：

#box h1 {
  color: blue;
}

得分：A = 0; B = 1; C = 0; D = 1 => 0101 = 5 (win)

h1 .title {
  color: red;
}

得分：A = 0; B = 0; C = 1; D = 1 => 0011 = 3

h1 {
  color: green;
}

得分：A = 0; B = 0; C = 0; D = 1 => 0001 = 1

在你的情况下：

.myControl > .short {
   width: 50px;
}

得分：A = 0; B = 0; C = 1; D = 0 => 0010 = 2

.myControl > input[type=text] {
    width: 200px;
}

得分：A = 0; B = 0; C = 1; D = 1 => 0011 = 3(win)

此规则有效且易于记忆

CSS优先顺序

2 个答案: