Javascript jQuery中样式化小部件的应用似乎有所不同

在我的代码片段中，我演示了如何使用

#divId.class

将不同的类应用于两个不同的

accordion

小部件。这非常有效，但当我尝试将样式应用于

对话框

小部件时，它的性能并不相同。我想不出来。为什么同样的规则不适用？我不熟悉jQuery

$（函数（）{
$（“#dialog”）.dialog（）；
});
$（函数（）{
$（“#dialog2”）.dialog（）；
});
$（函数（）{
$（“#手风琴”）。手风琴（）；
});
$（函数（）{
$（“手风琴2”）.accordion（）；
});
#dialog.ui对话框标题栏{
背景图像：无；
背景色：红色；
}
#对话框2.ui对话框标题栏{
背景图像：无；
背景颜色：绿色；
}
#用户界面accordion标题{
背景图像：无；
背景色：红色；
}
#accordion2.ui accordion头文件{
背景图像：无；
背景颜色：绿色；
}

1.
2.
1.
2.
1.
2.
1.
2.
jQuery UI仅在提供的id中包装对话框内容。不能使用id设置对话框标题的样式

您可以使用
aria descripbeby
属性来选择特定对话框并设置其样式。此属性的值设置为对话框元素的id


$（函数（）{
$（“#dialog，#dialog2”）.dialog（）；
$（“#手风琴，#手风琴2”）。手风琴（）；
});
[aria descripeby=“dialog”].ui对话框标题栏{
背景图像：无；
背景色：红色；
}
[aria descripeby=“dialog2”].ui对话框标题栏{
背景图像：无；
背景颜色：绿色；
}
#用户界面accordion标题{
背景图像：无；
背景色：红色；
}
#accordion2.ui accordion头文件{
背景图像：无；
背景颜色：绿色；
}

1.
2.
1.
2.
1.
2.
1.
2.
jQuery UI仅在提供的id中包装对话框内容。不能使用id设置对话框标题的样式

您可以使用
aria descripbeby
属性来选择特定对话框并设置其样式。此属性的值设置为对话框元素的id


$（函数（）{
$（“#dialog，#dialog2”）.dialog（）；
$（“#手风琴，#手风琴2”）。手风琴（）；
});
[aria descripeby=“dialog”].ui对话框标题栏{
背景图像：无；
背景色：红色；
}
[aria descripeby=“dialog2”].ui对话框标题栏{
背景图像：无；
背景颜色：绿色；
}
#用户界面accordion标题{
背景图像：无；
背景色：红色；
}
#accordion2.ui accordion头文件{
背景图像：无；
背景颜色：绿色；
}

1.
2.
1.
2.
1.
2.
1.
2.
您调用的元素
dialog（）
不是标题栏所在的外部包装器…标题是同级，因为插件使用包含这两个元素的外部元素包装您的元素

有一个选项可以在此外部包装上设置类：

$("#dialog").dialog({dialogClass: "dialog-red"});

然后在css中：

.dialog-red .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}


$（函数（）{
$（“#对话框”）。对话框({
dialogClass：“对话框红色”
});
});
.dialog红色.ui对话框标题栏{
背景图像：无；
背景色：红色；
}

1.
2.
您调用的元素
dialog（）
不是标题栏所在的外部包装器…标题是同级，因为插件使用包含这两个元素的外部元素包装您的元素

有一个选项可以在此外部包装上设置类：

$("#dialog").dialog({dialogClass: "dialog-red"});

然后在css中：

.dialog-red .ui-dialog-titlebar {
  background-image: none;
  background-color: red;
}


$（函数（）{
$（“#对话框”）。对话框({
dialogClass：“对话框红色”
});
});
.dialog红色.ui对话框标题栏{
背景图像：无；
背景色：红色；
}

1.
2.