将现有CSS类合并到新的CSS类中，以获得相同的设计输出，但使用较少的类_Css_Accordion

将现有CSS类合并到新的CSS类中，以获得相同的设计输出，但使用较少的类

css

将现有CSS类合并到新的CSS类中，以获得相同的设计输出，但使用较少的类,css,accordion,Css,Accordion,我有一个CSS样式表，它包含几个类来设置accordion元素的样式。由于编辑器软件中的一些限制，我不得不使用，我需要通过JavaScript嵌入其他手风琴。这个脚本只允许我使用三个CSS类来设置手风琴的样式。我想给他们一个类似于那些由编辑创建的样式我的问题是，我不知道如何“分解”以下多个类（来自编辑器软件的类）到三个新类（用于JS的类），以获得类似风格的手风琴编辑器中的现有CSS类：我尝试了以下方法，但无效： .balken{ 框大小：边框框；光标：手；光标：指针；填充：10px

我有一个CSS样式表，它包含几个类来设置accordion元素的样式。由于编辑器软件中的一些限制，我不得不使用，我需要通过JavaScript嵌入其他手风琴。这个脚本只允许我使用三个CSS类来设置手风琴的样式。我想给他们一个类似于那些由编辑创建的样式

我的问题是，我不知道如何“分解”以下多个类（来自编辑器软件的类）到三个新类（用于JS的类），以获得类似风格的手风琴

编辑器中的现有CSS类：

我尝试了以下方法，但无效：

.balken{
框大小：边框框；
光标：手；
光标：指针；
填充：10px 20px 10px 32px；
边框顶部：1px实心；
左边框：1px实心；
右边框：1px实心；
游标：继承；
浮动：左；
背景：#ffffff url（）10px 50%无重复；
最小宽度：30%；
}
balkenopen先生{
光标：手；
光标：指针；
背景图片：url（）不重复；
}
.吸入{
填充：10px；
}

[编辑]

以下是我在编辑器代码中嵌入的JS：

“>
//初始化第一个默认打开：
ddaccordion.init({
headerclass：“bar”，//头组的共享CSS类名
contentclass:“内容”//内容组的共享CSS类名
revealtype:“click”//当用户在标题上单击或点击鼠标时显示内容？有效值：“click”、“clickgo”或“mouseover”
mouseoverdelay:200，//如果revealtype=“mouseover”，则在标头在mouseover上展开之前以毫秒为单位设置延迟
collapseprev:true，//折叠以前的内容（因此在任何时候只打开一个）？true/false
defaultexpanded:[]，//默认打开的内容索引[index1、index2等].]表示没有内容。
onemustopen:false，//指定是否至少有一个标头应始终打开（因此从不关闭所有标头）
animatedefault:false，//默认情况下打开的内容是否应动画显示到视图中？
scrolltoheader:，//每次用户展开后是否滚动到标题？
persiststate:false，//浏览器会话中打开内容的持久状态？
toggleclass:[“bar”，“baropen”]，//收拢和展开标头时将应用于标头的两个CSS类，分别为[“class1”，“class2”]
togglehtml:[“无”、“”、“”]、//在头折叠和展开时分别向头添加额外的HTML[“位置”、“html1”、“html2”]（请参阅文档）
animatespeed:，//动画速度：以毫秒为单位的整数（即：200），或关键字“快”、“正常”或“慢”
oninit:function（expandedIndies）{//头初始化时要运行的自定义代码
//无所事事
},
onopenclose：函数（头、索引、状态、isuseractivated）{//在打开或关闭头时运行的自定义代码
//无所事事
}
})

正如你所看到的，这个脚本已经给出了类。我不知道如何编辑这些类，以便它们创建类似于CSS编辑器中的手风琴样式类的样式

整个页面只有一个CSS文件。

[/EDIT]

我不知道这种类型的编辑器，但有两种方法可以实现您想要的： 解决方案#1: 如果有css编辑器的参考把它放在定制的css引用e.ge之前

<html>
  <head>
    <link rel="stylesheet" href="editor.css">
    <link rel="stylesheet" href="YourCustomizedStyle.css">
  </head>
  <body>
  </body>
</html>

你能给我看一下你的代码吗？嘿，阿拉，谢谢你的评论。你想看哪种代码？JS？不，我是说HTMLI很想看，但是这个讨厌的编辑器我需要使用CCML语言，代码分布在许多文件中。但是这里有一些创建手风琴的输出代码（由编辑器创建）

TESTTESTTESTTEST

很抱歉，评论中的可读性不好。这有点难以解释。这个编辑器软件用来创建网站的源代码很难阅读，让我感到困惑。但是我会尽力给你所有你需要的信息。非常感谢你的回答。但我希望它反之亦然，这样我的定制css就可以创建与编辑器css相同的样式。（就像编辑器css覆盖了我的自定义css）只需以同样的方式使用您的类，不客气：）哦，在编辑器css中是整个页面的所有css，不仅是手风琴，然后用

div

包装手风琴，并给它一个

类

，然后为该类下的所有元素设置样式，以确保不会影响任何其他内容。我们必须在我的问题中添加JS和更多信息。我明白你的意思，但我仍然不明白如何“从编辑器css类中获得样式”。因为css编辑器使用8个类来创建和设置手风琴的样式。javascript只使用3个类。我需要将8个类的css“分解”为新的3个类，以在我的3个类中获得相同的样式（编辑器使用8个类创建）。但是编辑器使用了很多子类/子类，我还没有弄清楚如何将它们压入我的3个类中。感谢您的时间和帮助，Alaa Mh:）

.bar {
}

.baropen {
}

.content {
}

.balken {
  box-sizing: border-box;
  cursor: hand;
  cursor: pointer;
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
}

.balkenopen { 
    cursor: hand;
    cursor: pointer;
    background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat;

}
.inhalt {
    padding: 10px;
}

<script type="text/javascript" src="<cc:print value="&ddac.url">">">

</script>
<cc:if cond="&para.properties.design.ddaccor.first.default.open">
<cc:set value="0" obj="para.properties.design.ddaccor.first.default.open"></cc:if>
<script type="text/javascript">
<cc:if cond="&topic.properties.design.ddaccor.scrolltop"><cc:set value="true" obj="scrollstatus"><cc:else><cc:set value="false" obj="scrollstatus"></cc:if>
<cc:if cond="&topic.properties.design.ddaccor.default.open gt 0"><cc:set value="&topic.properties.design.ddaccor.default.open-1" obj="topic.properties.design.ddaccor.default.open"></cc:if>
//Initialize first Default Open :
ddaccordion.init({
headerclass: "bar", //Shared CSS class name of headers group
contentclass: "content", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
defaultexpanded: [<cc:print value="&topic.properties.design.ddaccor.default.open">], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: <cc:print value="&scrollstatus">, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["bar", "baropen"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "<cc:print value='&topic.properties.design.ddaccor.slide.speed'>", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
})
</script>

<html>
  <head>
    <link rel="stylesheet" href="editor.css">
    <link rel="stylesheet" href="YourCustomizedStyle.css">
  </head>
  <body>
  </body>
</html>

.balken {
  box-sizing: border-box !important;
  cursor: hand !important;
  cursor: pointer !important;
  padding: 10px 20px 10px 32px !important;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder"> !important;
  cursor: inherit !important;
  float: left !important;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat !important;
  min-width: 30% !important;
}

.balkenopen { 
    cursor: hand !important;
    cursor: pointer !important;
    background-image: url(<cc:print value="&accopen.svg.filename">)no-repeat !important;

}
.inhalt {
    padding: 10px !important;
}