使用 CSS 的 Jquery UI 对话框中的主题元素...如何？

Question

由于旧版本显然对人们来说太难理解了，这里是 HTML、CSS 和 JavaScript 的组合：

$(document).ready(function() {
  $('#test').dialog({
    autoOpen: false,
    modal: true
  });
  $("#test-link").click(function() {
    $('#test').dialog('open');
  });
});

div#main div#test label {
  display: block;
}

div#main div#test input {
  padding-left: 100px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<div id="main">
  <p><a href="#" id="test-link">test</a>
    <p>
      <div id="test" title="Submit Bug or Feature Request">
        <form>
          <label for="test_desc">Short Description:</label>
          <input type="text" name="test_desc" id="test_desc" value="" />
          <input type="submit" name="" value="Submit" />
        </form>
      </div>

</div>

对话框工作正常，但 CSS 不行。任何想法为什么？

Answer 1

JQuery 在 DOM 树中移动对话框的 DIV 并将其包装在其他一些中。因此 CSS 选择器不起作用。使用上面的示例，您必须执行以下操作：

div.ui-dialog div#test label {
    display: block;
}
div.ui-dialog div#test input {
    padding-left: 100px;
}

Answer 2

css 应该可以工作。这可能是css规则级联的问题。是否有更具体的选择器应用这些规则，例如“#dialog div#test label”？如果没有 html/css 的其余部分，就不可能指出细节。获取 firebug 并查看将哪些规则应用于这些元素。