jQuery UI widget CSS 固有问题

Question

我的页面上有几种不同类型的UI小部件。有一个类在它们之间是通用的.ui-widget-content .我需要为每个类设置不同的样式，因此我为 HTML 元素分配了唯一的 ID 或类。这对于一种类型的小部件(我可以在其中使用 JS 中的 dialogClass 选项来分配类的对话框(工作正常，但其他类型的小部件(滑块(仍然只会继承.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，它会在加载时自动向小部件添加一大堆默认样式，这就是为什么你在我的HTML中看不到class="ui-widget-content"，没有必要声明它。

Answer 1

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

问题 CSS(不起作用(：

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

简单修复(删除 id 和类之间的空格(：

#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>