css - jQuery UI 小部件 CSS 继承问题

Question

我的页面上有几种不同类型的 UI 小部件。它们之间有一个共同的类 .ui-widget-content。我需要为每个类设置不同的样式，因此我为 HTML 元素分配了唯一的 ID 或类。这适用于一种类型的小部件(对话框，我可以在 JS 中使用 dialogClass 选项来分配类)，但另一种类型的小部件( slider )仍然只会继承 的样式.ui-widget-content 即使我为 #id .ui-widget-content 指定样式以获取感兴趣的特定元素。此时我对如何覆盖原始样式有点不知所措。

HTML:

<div id="opacitySlide" class="slider">
     <div id="opacityVal" class="ui-slider-handle"></div>
</div>
<div id="habClassify-dialog" title="Habitat Classification">
    <div id="HabClassifyGPService">
        //whole bunch of stuff
    </div>
</div>
<div id="error-dialog" title="ERROR"></div>
<div id="success-dialog" title="SUCCESS">
    <p>Habitat classification completed successfully! Your results will be viewable in 10 minutes.</p>
</div>

CSS:

//This one doesn't work and get overridden by the default style .ui-widget-content    
#opacitySlide .ui-widget-content {
    border: 1px solid black;
}

//This one does work, these classes are assigned in the JS, NOT the HTML
.habClassify-dialog .ui-widget-content,
.error-dialog .ui-widget-content,
.success-dialog .ui-widget-content {
    border: none;
}

我也尝试过使用我在 HTML 中分配的自定义类而不是非工作 CSS 的 id，但没有成功。

.slider .ui-widget-content {
    border: 1px solid black;
}

这是JS代码:

//Creates the popup dialog for the habitat classification button
          var habClassifyDialog = $("#habClassify-dialog").dialog({
              autoOpen: false,
              height: "auto",
              width: 400,
              modal: true,
              dialogClass: 'habClassify-dialog',
              buttons: [{
                  id: "classify",
                  text: "Classify habitat",
                  click: upload
              }],
              close: function () {
                  $('#uploadForm')[0].reset();
                  $('#validation-text').empty();
              }
          });
      $('#classifyHab').click(function() {
              habClassifyDialog.dialog("open");
      });

      //Creates the popup dialog that contains error messages
      var errorDialog = $("#error-dialog").dialog({
          autoOpen: false,
          height: "auto",
          width: 1000,
          modal: true,
          dialogClass: 'error-dialog',
          buttons: [{
              id: "error-ok",
              text: "Ok",
              click: function () {
                  errorDialog.dialog("close");
              }
          }]
      });

      //Creates the popup dialog that shows the success message
      var successDialog = $('#success-dialog').dialog({
          autoOpen: false,
          height: "auto",
          width: 400,
          modal: true,
          dialogClass: 'success-dialog',
          buttons: [{
              id: "success-ok",
              text: "Ok",
              click: function () {
                  successDialog.dialog("close");
                  if (habClassifyDialog.dialog('isOpen')) {
                      habClassifyDialog.dialog("close");
                  }
              }
          }],
          close: function () {
              if (habClassifyDialog.dialog('isOpen')) {
                  habClassifyDialog.dialog("close");
              }
          }
      });

      //Create the opacity slider
      var handle = $("#opacityVal");
      $("#opacitySlide").slider({
          range: "min",
          value: 100,
          min: 0,
          max: 100,
          create: function () {
              handle.text($(this).slider("value") + "%");
          },
          slide: changeOpacity,
          change: changeOpacity
      });

如果您以前没有使用过 jQuery UI，它会在加载时自动将一大堆默认样式添加到小部件，这就是为什么您看不到 class="ui-widget-content" 在我的 HTML 中的任何地方，都没有必要声明它。

Answer 1

好吧，我正式犯了有史以来最愚蠢的错误。考虑到 HTML 是使用我分配的正确自定义 ID 生成的，我认为必须有一种方法可以使用该 ID 访问 ui-widget-content 类。就像将它们链接在一起一样简单，之前我测试它时我在它们之间留了一个空格。

问题 CSS(无法工作):

#opacitySlide .ui-widget-content {
      border: 1px solid black;
}

简单修复(删除 id 和 class 之间的空格):

#opacitySlide.ui-widget-content{
     border: 1px solid black;
}

为了完整起见，解释是如果你在这些项之间留一个空格，它认为 HTML 的结构是这样的:

<div id="opacitySlide">
    <div class="ui-widget-content"></div>
</div>

当我的 HTML 真的是这样构造的时候:

<div id="opacitySlide" class="ui-widget-content"></div>