如何使用属性选择器为一个输入块应用所需的样式？

Question

我创建了几个块，我需要用特殊的宽度制作其中一个，因为我解决了这个问题？

有我的Html代码

<section id="sec">
  <input type="text" name="myname1" />
  <input type="text" name="myname2" />
  <input type="text" name="myname3" />
</section>

和Css代码

#sec input {
  width: 300px;
  border-radius: 3px;
  border: 1px solid #cdcdcd;
  height: 52px;
  margin: 2px 0 27px 0;
  font-size: 24px;
  font-weight: 100;
  padding: 0 10px;
  box-sizing: border-box;
}
input[name=myname2] {
  width: 150px;
}

请参阅JSFiddle

Answer 1

解决起来非常简单。选择器#sec input比input[name=myname2]更重要，因为它是后代选择器，CSS指定后代比单元素选择器更重要。为了使input[name=myname2]正常工作，只需将其更改为#sec input[name=myname2]。

然后，因为#sec input[name=myname2]是后代而且更具体，它会覆盖#sec input。

干杯