Проблемы наследования CSS виджета пользовательского интерфейса jQuery

Question

У меня есть несколько разных типов виджетов пользовательского интерфейса на моей странице. Существует класс, который является общим для всех из них .ui-widget-content. Мне нужно по-разному стилизовать этот класс для каждого, поэтому я назначил уникальные идентификаторы или классы элементам HTML. Это работало нормально для одного типа виджета (диалоговое окно, в котором я могу использовать опцию dialogClass в JS для назначения классов), но другой тип виджета (слайдер) все еще будет наследовать стили только от .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, но безуспешно.

.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, он автоматически добавляет целую кучу стилей по умолчанию к виджетам при загрузке, поэтому вы не видите class="ui-widget-content" в моем HTML-коде, его не нужно объявлять.

Answer 1

Хорошо, я официально совершил самую глупую ошибку. Учитывая, что HTML генерировался с правильным назначенным пользователем идентификатором, я решил, что должен быть способ доступа к классу ui-widget-content с использованием этого идентификатора. Это было так же просто, как связать их вместе, прежде чем, когда я проверял это, я оставил промежуток между ними.

Проблема CSS (не будет работать):

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

Простое исправление (убрать пробел между идентификатором и классом):

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