css - 将现有的 CSS 类合并到新的 CSS 类中以获得相同的设计输出但类更少

Question

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

我的问题是我无法弄清楚如何将以下多个类(来自编辑器软件的类)“分解”为三个新类(用于 JS 的类)以获得类似风格的 Accordion 。

Existing CSS classes from the editor:

<cc:*> Accordeon </cc:*>

.sqracc {
  box-sizing: border-box;
  margin: 0 auto 30px auto;
  max-width: 1400px;
}
.sqracc .sqracchead {
  box-sizing: border-box;
  margin: 0 30px;
  padding: 0;
  border-bottom: 1px solid <cc:print value="site.properties.design.boxborder">;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sqracc .sqracchead:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.sqracc .sqracchead div {
  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%;
  -webkit-user-select: none;
  user-select: none;
}
.sqracc .sqracccontainer {
  display: none;
}
.sqracc.sqraccopen .sqracccontainer {
  display: block;
}
.sqracc.sqraccopen .sqracchead div {
  background-image: url(<cc:print value="&accopen.svg.filename">);
}
@media screen and (max-width: 767px) {
  .sqracc .sqracchead {
    margin: 0;
    padding: 0 30px;
  }
}

And this are my new classes:

.bar {
}

.baropen {
}

.content {
}

I tried the following but it didn't work:

.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;
}

[编辑]

here is the JS which I embedded in the code of the editor:

<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>

如您所见，此脚本提供了类。而且我不知道如何编辑这些类，以便它们创建类似于编辑器 CSS 中 Accordion 样式类的样式。

整个页面只有一个CSS文件。[/编辑]

Answer 1

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

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

这将使您的样式覆盖编辑器样式解决方案#2:在您的 CSS 上使用 !important(我不喜欢这种方式)，如下所示:

.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;
}