Question

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

<%= 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%; }设置宽度，但它会影响我的所有日期选择。我做错了什么？！

Answer 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;
}

Answer 2

知道了！

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

＆＃13;

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

＆＃13;

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

2 个答案: