Question

以下是render: function() { return ( <div className='join-us-form-wrapper'> <form action = "/contact" method="post" onValidSubmit={this.onSubmit} onValid={this.enableButton} onInvalid={this.disableButton}> <TextInput name='name' label='Full Name' placeHolder='Full Name' required/> <TextInput name='email' type='email' validations="isEmail" label='Your Email' placeHolder='Your Email' required/> <TextInput name='phone' type='phone' label='Your Phone' placeHolder='Your Phone' required/> <TextInput name='city' label='City' placeHolder='City' required/> <div className='input-wrapper'> <label htmlFor='state'>State</label> <input type='text' name='state' placeholder='State' /> </div> <TextInput name='company' label='Company Name' placeHolder='Company Name'/> <TextInput name='title' label='Job Title' placeHolder='Job Title'/> <SelectInput name='home-airport' label='What is your home airport?' opts={homeAirportOptions} required /> <MultiSelectInput name='frequent-destinations' label='Which Destinations Do You Travel to Frequently?' opts={destinationOptions} required /> <SelectInput name='travel-type' label='Do you travel for business or pleasure?' opts={['business', 'pleasure']} required /> <SelectInput name='travel-frequency' label='How often do you travel?' opts={['daily', 'weekly', 'monthly']} required /> <SelectInput name='travel-prefs' label='Which days do you prefer to travel?' opts={travelPrefsOptions} required /> <input type="submit" className='submit-button button' value='Submit Your Application'/> </form> </div> ); } }); module.exports = JoinUsForm;的css：

img

在样式的底部，我将特定的img { border: none; max-width: 100%; height: auto !important }覆盖为：

img

这是我的HTML：

.locals-list>img {
    height: 35px;
}

现在问题是，我的新<div class="eas-footer"> <div class="wrap cfx"> <h6 class="know-your-city" style="text-align: center;">Supported by</h6> <div class="locals-list"> <a href="http://www.indonesia.travel" target="_blank"><img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true"></a> </div> </div> </div>更改没有发生。我仍然得到height。谢谢！

Answer 1

在CSS的末尾添加！important （height: 35px !important;）的另一个高度将覆盖之前的高度。

此外，我已将.locals-list>img更改为.locals-list img。请参阅下面的代码。

img {
  border: none;
  max-width: 100%;
  height: auto !important;
  border: 1px solid green;
}
.locals-list img {
  height: 85px !important;
}

<div class="eas-footer">
  <div class="wrap cfx">
    <h6 class="know-your-city" style="text-align: center;">Supported by</h6>
    <div class="locals-list">
      <a href="http://www.indonesia.travel" target="_blank">
        <img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true">
      </a>


    </div>
  </div>
</div>

Answer 2

添加此属性!important

.locals-list>img {
    height: 35px !important;
}

Answer 3

!important关键字优先于其他属性值。因此，要么从!important移除height:auto（更好的方式），要么将!important添加到height: 35px;。

在CSS中添加!important不是一件好事。您应该仅将其用于特定目的，例如：

.always-hide-this-no-matter-what {
  display: none !important;
}

这里有一个关于CSS特异性的好article。

Answer 4

因为你有身高：自动！重要所以如果你想覆盖它，你必须使用重要的：

.locals-list>img {
    height: 35px !important;
}

如何覆盖img标签的CSS

4 个答案: