Question

所以情况就是这样：我正在创建一个带有8个标签/拉出面板的网页（左边4个，右边4个）。单击面板时，面板会展开所有面板在CSS中的样式都相同。但是，我的CSS非常冗长，因为我为每个面板反复复制同一组属性。唯一变化的变量是面板的位置。

我的问题是：是否有更有效和更清晰的方法来编码？ - 另外，我在某处读到你可以使用jquery更改特定的css样式，但效率较低。

（我刚刚开始深入研究HTML，CSS和JS，所以我对所有内容的理解仍然模糊不清，我使用的术语可能会关闭......）

Answer 1

您可以为所有正在复制的css样式创建单个类：

.tab-style{
   ... // whatever your duplicate styles are
}

将该课程应用于每个标签页。然后创建一个单独的类，其中包含每个面板的不同样式。

.tab1-style{
   ... // position styling for tab 1
}
.tab2-style{
   ... // position styling for tab 2
}
etc...

然后将不同的类应用于每个选项卡。

示例

<li class='tab-style tab1-style'>....</li> <li class='tab-style tab2-style'>....</li>

等等。这样，您只能一次编写共享css样式。

Answer 2

为什么不使用公共类添加公共属性，然后使用唯一类来更改位置。

电子。

.panel {
  // common styles here to apply to all panels
}

.panel.one {
  // panel one styles here
}

.panel.two {
  // panel two styles here
}

Answer 3

使用父元素并为子元素应用常用样式。之后，为每个面板创建自己的样式并单独应用。

<强> HTML

 <ul class="commonstyle">
   <li class="first">First</li>
   <li class="second">Second</li>
   <li class="third">Third</li> 
 </ul>

<强> CSS

 .commonstyle li
 {
  /* All common properties */
 }  
 .first{/* First child property*/}
 .second{/* Second child property*/} 
 .third{/* Third child property*/}

改变一个CSS属性和效率

3 个答案: