html - 如何使用属性选择器为一个输入块应用您想要的样式？

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.

干杯