覆盖css规则不起作用

Question

所以我在Pure css Framework中设置了一个标签,如下所示:

.pure-form-aligned .pure-control-group label {
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  width: 10em;
  margin: 0 1em 0 0; }

我想"覆盖"宽度,所以下面我这样做:

.form label {//note the dot, this is a class
  width: auto; }

在html我有:

<form name="form" method="post" class="pure-form pure-form-aligned form">
 <div class="pure-control-group">
              <input type="checkbox" id="form_permissions_1" name="form[permissions][]" value="1" checked="checked" />
              <label for="form_permissions_1">Tworzenie nowego u?ytkownika</label>
 <div>

请注意,我在声明中添加了"form"类.

为什么它不起作用？我过去常常这样做.

更新:我添加了更多的HTML代码.

Answer 1

这是因为第一个选择器比第二个选择器具有更强的力量.

这个:

.pure-form-aligned .pure-control-group label 

是深深的

.form label 

然后第一个覆盖第二个.您必须在选择器中放置更多特定的类名或使用!important

.form label { width: auto !important; }

要么

.form .anotherclass label