[英]CSS put html tag style in a class
我有用於 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 標簽但不是為了手風琴,該怎么辦。
您可以像accordion
一樣向ul
添加class
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.