CSS 标签赋值

Question

我正在使用这个 CSS

.options input[type="radio"],input[type="checkbox"],label{
垂直对齐:中间；
}

但是 vertical-align 属性被分配给网站上的所有复选框，而不仅仅是“选项”类中的复选框。

Answer 1

CSS 规则以逗号分隔，彼此没有关系，只是一种简写的、一致的方式，为不同的规则应用相同的样式。您的示例可以重写为:

.options input[type="radio"]
{
  vertical-align: middle;
}
input[type="checkbox"]
{
  vertical-align: middle;
}
label
{
   vertical-align: middle;
}

因此，第二条和第三条规则会将这些样式应用于所有输入复选框和标签。要获得您想要的结果，您的规则应重写为:

.options input[type="radio"]
{
  vertical-align: middle;
}
.options input[type="checkbox"]
{
  vertical-align: middle;
}
.options label
{
   vertical-align: middle;
}

那么简写为:

.options input[type="radio"],
.options input[type="checkbox"],
.options label
{
   vertical-align: middle;
}

此外，值得注意的是，最佳做法是将每个规则和样式放在单独的行上。如果您以后要使用它，这将使版本控制变得容易得多。