如何为日期选择设置不同的宽度？答案

【问题标题】：How to set different widths for date-select?如何为日期选择设置不同的宽度？
【发布时间】：2015-05-14 03:29:57
【问题描述】：

我在不同的地方有这条线的变体：

<%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %>

我尝试通过为 select 或 date-select 或 date-pick 设置不同的 id 来更改宽度，但无济于事。

以下是我的样式表中的一些示例：

select.goal {
  width: 29.6%;
  color: green;
}

#goal.date-select {
  width: 29.6%;
  color: green;
}

.select {
 #goal {
  width: 29.6%;
  color: green;
}
}

只有通过.select { width: 29.6%; } 设置宽度才有效，但它会影响我所有的日期选择。我做错了什么？！

【问题讨论】：

标签： html css date

【解决方案1】：

用这一行：

<%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %>

你可以这样做：

#goal {
    width: 29.6%;
    color: green;
}

您可以使用 #gloa.date-pick 或 .date-pick#goal，但假设 ID 是唯一的，那就太过分了。

记住顺序很重要。如果你这样做：

.class1.class2 {
    background-color: green;
}
.class1 {
    background-color: blue;
}

所有.class1 元素都将具有蓝色背景，即使.class2.class1 也会被覆盖，所以如果是这种情况，请这样做：

.class1 {
    background-color: blue;
}
.class1.class2 {
    background-color: green;
}

【讨论】：

谢谢武士！我曾尝试过#goal { width: 29.6%; color: green; }，但这不适用于<%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %>
你检查过你之后没有覆盖它吗？你能展示一个现场演示吗？
然后，当我检查元素时，没有 date-pick 或 id goal @samurai 的迹象
我得到了答案，但我标记了你的正确答案，因为你的答案通常更有用:)

【解决方案2】：

知道了！

这些是系统以某种方式自行生成的。通过铬检查看到它。复制并粘贴到css文件中并进行适当的调整：

#goal_deadline_1i {
  width: 29.6%;
  color: green;
}

#goal_deadline_2i {
  width: 29.6%;
  color: green;
}

#goal_deadline_3i {
  width: 29.6%;
  color: green;
}

【讨论】：