时间戳

首页 > 解决方案 > CSS将html标签样式放在一个类中

html - CSS将html标签样式放在一个类中

问题描述

我有用于 UL 的 CSS，因为它用于手风琴。但是我想放类，所以如果我将 UL 与其他功能一起使用，它将不会使用这种样式：

ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}

ul li {
  position: relative;
  padding-top: 7px;
  margin: 0;
}

ul li:last-of-type {
  padding-bottom: 0;
}

ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 6px;
  right: 0;
}

ul li i:before,
ul li i:after {
  content: "";
  position: absolute;
  background-color: #999;
  width: 3px;
  height: 9px;
}

ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}

ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

ul li input[type=checkbox]:checked~p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

ul li input[type=checkbox]:checked~i:before {
  transform: translate(2px, 0) rotate(45deg);
}

ul li input[type=checkbox]:checked~i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

此样式用于手风琴功能。如果我使用 UL 标签但不是为了手风琴的目的怎么办。

标签： htmlcss

解决方案

你可以添加class喜欢ulaccordion

.accordion {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}

.accordion li {
  position: relative;
  padding-top: 7px;
  margin: 0;
}

.accordion li:last-of-type {
  padding-bottom: 0;
}

.accordion li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 6px;
  right: 0;
}

.accordion li i:before,
.accordion li i:after {
  content: "";
  position: absolute;
  background-color: #999;
  width: 3px;
  height: 9px;
}

.accordion li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}

.accordion li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

.accordion li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}

.accordion li input[type=checkbox]:checked~p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}

.accordion li input[type=checkbox]:checked~i:before {
  transform: translate(2px, 0) rotate(45deg);
}

.accordion li input[type=checkbox]:checked~i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
<ul class="accordion">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

推荐阅读