使用jQuery UI的CSS样式来为我的HTML元素添加样式

Question

使用jQuery UI可以给我提供这些漂亮的样式表。这些适用于jQuery UI的小部件...但是，我应该如何将这些样式应用于我的HTML元素，以获得相同的外观和感觉呢？

当我更改jQuery UI主题时，我希望我的页面相应地更改。我知道有类似的问题，例如“jQuery UI Themeroller Question”。在那里，它说我只能打开CSS并手动将CSS类应用于我的元素。

没有更好/正式的方法来做到这一点吗？特别是使用Theme Switcher，我可以轻松自定义UI。

-- 添加原始问题 --

好的，你们都向我解释，我必须手动将CSS类应用于我的元素。我欣赏这些信息，你们肯定比我更有CSS经验。然而，当我后来想要更改样式时，我必须在许多地方更改这个(jQuery UI)类 - 例如所有的td元素。因此，在我的CSS文件中，我更喜欢通过选择器应用样式。

问题：我可以使用选择器重新应用(jQuery UI css)类吗，例如“将类XYZ应用于ABC div中的所有表头”？

我可以通过jQuery选择来做到这一点，但我可以在“我的CSS”中做到吗？

- Horst Walter

---

为什么不直接将jQuery-UI的CSS类添加到您的元素中？也许我没有理解您的问题。 - Fender

只需更改CSS类而不是通过应用其他CSS类更改元素...只需更改您的样式表，一切都将被新样式化。 - Fender

我修改了我的回答以回答您的后续问题。 - normanthesquid

@Fender：我不应更改jQuery UI的css，那么当我编写“td class =”SomeJQueryClass“时，我该怎么做？ - Horst Walter

像这样：<input type="button" class="ui-button" />，你可以包含你的CSS：<link rel="stylesheet" type="text/css" href="jquery_ui_css_black.css">，然后你可以移除该元素并添加<link rel="stylesheet" type="text/css" href="jquery_ui_css_red.css">代替，现在它应用了新的CSS。 - Fender

Answer 1

回答您的问题，这是官方的方法，用于为不是由jQuery UI小部件构建的元素设置主题。您必须将特定的类应用于您的元素，它们将最终看起来像来自jQuery UI的其他小部件。请注意保留HTML标记。

- Lance

---

感谢您的帮助，底线是 - 正如您所说 - 似乎没有其他方法。 - Horst Walter

Answer 2

在火狐/谷歌浏览器中，

右键点击要复制样式的元素，选择检查元素。注意它属于哪些类。

将这些类添加到您的元素中。

回答上面你的td问题：

你可以在你的CSS中创建一个td类，并从jQuery UI CSS文件中复制样式到它中：

td{
 //Styles go here
}

另外，您问道：“将XYZ类应用于位于ABC div中的所有表头？”请在您的CSS文件中添加以下内容：

#ABC th {
  class: XYZ;
}

如果div的ID是ABC。

div#ABC th{
   //Styles Go Here
}

如果div的class是ABC

div.ABC th{
   //Styles Go Here
}

- normanthesquid

---

谢谢，基本上你在上面已经说过了，“你可以从jQuery（td示例）中复制样式”。而我想要的不是复制，而是引用，类似于：td {jQueryStyleX}。因此，a）当我更改主题时，我不需要再次复制，b）随着jQuery UI的修复，我会自动获得更新，c）当我想要更改为jQueryStyleX时，它在一个单一的位置。或者我可以在CSS中写“td someClass”，但我从未见过这种写法。 - Horst Walter

你所询问的是CSS类继承，但这并不存在。你需要通过jQuery来实现。 - normanthesquid

我认为我更愿意使用现有的类并通过选择器应用它。在我看来，我不会称之为继承，在CSS上下文中，对我来说更多的是内部标签继承外部样式（例如，“tr”继承“table”的字体，如果没有被覆盖）。无论如何，非常感谢您的有益评论和反馈。 - Horst Walter