jQueryUI对话框所需的最小css？

我将介绍css和组合声明

例如，对话框的标题位于ui小部件标题栏和ui对话框标题栏中

问题是当我在一个对话框中有jQueryUI选项卡时。即使它们的作用域都是不同的css选择器，仍然存在一些冲突，因为选项卡继承了父级的一些样式

UI附加了这么多的类，这让我很头疼（我很乐意这么做）

---

我想知道是否有人将对话框css缩减为它所需要的css（不考虑其他UI元素）。因此，将声明组合成一个…

我最近使用了UI滑块，我只使用了脚本中使用的选择器，我能够将其减少到两个。他们中的大多数都可以报废。。比如“ui角落”。一个人所做的就是绕道而行。我的建议是在JSFIDLE中创建一个，看看您只需要哪些功能，然后应用您自己的样式

或者你也可以通过web检查器，编辑HTML，然后开始一个接一个地对它们进行破解，看看哪些是真正与脚本挂钩的

另一种选择是在内容周围放置一个包装DIV，并使用您自己的样式覆盖CSS

不过，最好的选择可能是查看文档，您可以看到它依赖于什么，在主题选项卡下，它会显示使用了哪些类

---

这不是一个很好的答案，但可能会有所帮助。

大多数小部件并不需要很多css样式

• 对话框不需要任何

• “可调整大小”需要其大多数样式，因为控制柄需要大小以便可以拖动

• Tabs只需要

  .ui Tabs hide

  类，该类仅为隐藏面板设置

  显示：none

---

请注意，所有小部件都有一个css样式，其名称（即

.ui dialog

）应用于其根元素，并且任何特定于小部件的样式都在其下有名称空间。

对于带有选项卡的jquery ui对话框，您所要做的就是：

HTML

---

请看这里的一个例子：

好的点-我基本上只是缩减/组合，以获得尽可能少的选择器/声明好的点-这些都是我正在做的事情-只是尝试将其降至绝对基础是的，我理解这一点。如果可以的话，我会尽量远离jQuery UI。。。主要是因为类的过度使用。jQuery mobile倾向于做同样的事情。嘿，Jeffery，谢谢你的回答，但是css仍然很大，因为UI将css分解为常见项的方式-而我正在尝试将其中一些组合起来，比如我在问题中引用的示例Hi Jason，问题不是很清楚。你是说，“问题是当我在一个对话框中有jquery UI选项卡时，即使它们都被限定在不同的css选择器范围内，仍然存在一些冲突，因为这些选项卡继承了父级的一些样式”。但在我发布的示例中没有冲突。你想要什么不同？正如您在这里看到的，当它们不在彼此内部时，样式是相同的：

<div id='unique_id'>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
    </div>
</div>

$('#tabs').tabs();
$('#unique_id').dialog();