jQuery UI组件CSS继承问题：不同组件.ui-widget-content样式无法独立设置

这个坑我之前踩过！问题出在jQuery UI不同组件渲染后的DOM结构不一样，导致你写的选择器匹配不到目标元素：

为什么Dialog生效但Slider不生效？ #

• Dialog组件：当你用dialogClass选项添加自定义类时，这个类是加在Dialog的外层容器上，而.ui-widget-content是属于它内部的内容容器（子元素），所以你写#dialog-id .ui-widget-content这种父元素+子元素的选择器，能精准命中目标，样式自然生效。
• Slider组件：你给原始div加了ID后，初始化Slider时，jQuery UI会直接把.ui-widget-content类添加到这个ID元素本身，而不是它的子元素。这时候你写#slider-id .ui-widget-content，是在找这个ID元素下的子元素里带.ui-widget-content的，根本不存在，所以样式只会继承基础的.ui-widget-content。

解决方案 #

方案1：修正CSS选择器（最简单）

直接用交集选择器，选中同时拥有ID和.ui-widget-content类的元素（注意ID和类之间没有空格！）：

#my-slider.ui-widget-content {
  background-color: #ffcccc;
  border-color: #ff6666;
}

方案2：用jQuery UI的classes选项（推荐，更清晰）

如果你的jQuery UI版本是1.12及以上，可以用classes选项直接给组件的特定部分绑定自定义类，完全避免选择器冲突：

$("#my-slider").slider({
  classes: {
    // 给.ui-widget-content对应的Slider轨道绑定自定义类
    "ui-widget-content": "custom-slider-track"
  }
});

然后写对应的CSS：

.custom-slider-track {
  background: #e6f9ff;
  border: 1px solid #33ccff;
}

方案3：手动添加自定义类（兼容旧版本）

如果你用的是旧版jQuery UI，没有classes选项，可以在初始化Slider后手动给容器加自定义类：

// 初始化Slider后添加自定义类
$("#my-slider").slider().addClass("my-custom-slider");

然后用交集选择器写样式：

.my-custom-slider.ui-widget-content {
  background: #f9f9cc;
  border-color: #cccc66;
}

小技巧 #

遇到这种样式不生效的情况，打开浏览器的开发者工具（F12），查看组件渲染后的DOM结构，看看.ui-widget-content到底挂在哪个元素上，再针对性写选择器，一抓一个准～

内容的提问来源于stack exchange，提问作者MKF