Question

如果这是非常基本的话我是csson的新手。但我在我的html页面中有这样的元素

<div  id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">

在我的CSS中，我有以下内容：

.ui-widget-content {
    background: yellow !important;
    color: blue !important;
    border-radius: 0px !important;
    border: none;
}

.ui-widget-content .ui-datepicker { 
    background: blue; !important;
    border: 1px solid #555; !important;
    color: red; !important;
}

有了这个，我希望我的ui-datepicker元素有蓝色背景但是它总是变成黄色。无论我在哪里放置.ui-wdget-content。如果我想让css所有ui-widget-element都有黄色背景，除了ui-datepicker有蓝色背景。我必须做什么css咒语？

Answer 1

.ui-widget-content .ui-datepicker应为.ui-widget-content.ui-datepicker（无空格）

任何ui-datepicker内都没有ui-widget-content类，而是要选择包含这两个类的元素。

Answer 2

你实际说的是：

<div class="ui-widget-content"> background yellow  </div>

<div class="ui-widget-content> yellow too
   <div  class="ui-datepicker" > background blue </div>
</div>

最重要的是将样式应用于顶部的内联样式

<div style="background-color: " >
</div>

检查以下内容：http://css-tricks.com/multiple-class-id-selectors/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 3

你有这个

.ui-widget-content .ui-datepicker {

但根据你的HTML

<div  id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">

你的CSS应该是

.ui-widget-content.ui-datepicker {

这会为你选择元素。

css样式评估的顺序是什么？

3 个答案: