前言
面试官：同学考你一个简单css内容，写一个可展开列表。
我：笑出了声。心想真的会出这么简单的内容哈哈哈！
面试官：同学不能用js哦，如果可以用stylus编写就更好啦！
我：小脑刹那间萎缩了......
Stylus 是一种 CSS 预处理器。预处理器是一种脚本语言，它扩展了 CSS 的功能，使得编写 CSS 更加高效、灵活和强大。Stylus 特别之处在于其简洁而灵活的语法，它允许开发者使用变量、嵌套规则、混合（Mixins）、继承、操作符、函数以及条件语句等高级功能来编写样式代码。
接下来，让我们通过一个腾讯的面试题，来更加深层次认识这个stylus语言带给css的便捷。虽然考察的是纯html+css内容，要想纯html+css达到完美可却不简单。
效果
有三个列表，并且可以展开和收缩，这题目看起来简单，但是且听我细细道来，你会发现里面有很多的秘密！
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css菜单</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="accordion">
<input type="checkbox" id="collapse1" hidden>
<input type="checkbox" id="collapse2" hidden>
<input type="checkbox" id="collapse3" hidden>
<!-- div替代品 html5语义化标签 SEO比较重要 -->
<article>
<label for="collapse1">列表1</label>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
</article>
<article>
<label for="collapse2">列表2</label>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
</article>
<article>
<label for="collapse3">列表3</label>
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
<p>内容4</p>
</article>
</div>
</body>
</html>
首先我们要进行stylus语言环境的配置，并引入其生成的css文件，配置好之后，我们先看看html部分。
- 我们设置了三个复选框，并且复选框的id与label标签的for相对应，可以方便用户的操作。服务于用户。
- 我们用article语义化标签，这有助于搜索引擎优化（SEO）和屏幕阅读器更好地理解页面结构。每个标签里面放入四段列表。
到此我们html部分就结束啦，我们重点讲解一下css部分。
css部分
* {
margin: 0;
padding: 0;
}
.accordion {
width: 300px;
}
.accordion article {
cursor: pointer;
}
.accordion article + article {
margin-top: 5px;
}
.accordion label {
display: block;
height: 40px;
padding: 0 20px;
background-color: #f00;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
.accordion p {
overflow: hidden;
padding: 0 20px;
border: 1px solid #f66;
border-top: none;
border-bottom-width: 0;
max-height: 0;
line-height: 30px;
transition: all 500ms;
}
.accordion input:nth-child(1):checked ~ article:nth-of-type(1) p,
.accordion input:nth-child(2):checked ~ article:nth-of-type(2) p,
.accordion input:nth-child(3):checked ~ article:nth-of-type(3) p {
max-height: 600px;
}
<生成css>
---------------------------
<书写的stylus>
*
margin 0
padding 0
.accordion
width 300px
article
cursor pointer
& + article
margin-top 5px
label
display block
height 40px
padding 0 20px
background-color red
cursor pointer
line-height 40px
font-size 16px
color #fff
p
overflow: hidden
padding: 0 20px
border: 1px solid #f66
border-top: none
border-bottom-width 0
max-height: 0
line-height 30px
transition: all 500ms
input
&:nth-child(1):checked ~ article:nth-of-type(1) p ,
&:nth-child(2):checked ~ article:nth-of-type(2) p ,
&:nth-child(3):checked ~ article:nth-of-type(3) p
max-height: 600px
- 我们首先清除默认的内外边距。
- 对整体的accordion设置宽度。
- 对article标签设置鼠标经过变成小手。
- 通过相邻兄弟选择器我们设置第二个和第三个article的margin top 值。
- 对label标签我们设置一些基本的样式。
- 接下来就是我们最重要的部分，我们这里运用了全体兄弟选择器，我们以input下第一段为例子说明，后面都是一样的，我们选中第一个被勾选的复选框，然后通过全体兄弟选择器找到所有的article，并根据复选框的序号找到对应article的位置，然后将里面的p显现出来，这一段是我们的核心部分！所以也可以理解为nth-child搭配input，nth-of-type搭配article。
作者：落雪遥夏
链接：https://juejin.cn/post/7379873506543616010