为我自己的HTML元素使用jQuery UI css样式

Question

Using jQuery UI gives me these nice stylesheets. These apply to the widgets, ... of jQuery UI. But how could I apply these styles to my own HTML elements to have the same look and feel?

When I change the jQuery UI theme I want my pages to change accordingly. I am aware there are similar questions such as " jQuery UI Themeroller Question ". There it is said I can only open the CSS and manually apply a CSS class to my elements.

Is there no better / official way to do it? Especially with the Theme Switcher I could easily have a customizable UI.

-- Add on to original question --

OK, all of you explain me, that I have to manually apply the css class to my element. I appreciate the information and you certainly have more CSS experience than I do. However, when I later want to change the style, I have to change this (jQuery UI) class in many places - eg all td elements. So in my CSS files I prefer to apply styles via selectors.

Q: Can I re-apply a class (of the jQuery UI css) with a selector, something like "apply class XYZ to all of my table headers in div "ABC"?

I could do this via jQuery selection, but can I do it within "my css"?

Answer 1

To answer your question, that is the official way of theming your own elements not constructed by a jQuery UI widget. You must apply the specific classes to your elements, and they will end up looking like other widgets from jQuery UI.

Answer 2

In firefox/chrome

Right click the element whose style you want to copy, and select inpsect element. Note which classes it belongs to.

Add those classes to your elements

to answer your td question above:

you could create a td class in your css, and copy the styles from the jquery ui csss file to it:

td{
 //Styles go here
}

also, you asked "apply class XYZ to all of my table headers in div "ABC"?" add this to your css file

if the divs ID is ABC

div#ABC th{
   //Styles Go Here
}

if the divs class is ABC

div.ABC th{
   //Styles Go Here
}