使用CSS实现折叠面板总结

任务目的

任务描述

任务注意事项

参考资料

MDN Adjacent sibling selectors: 了解CSS中的兄弟相邻选择器

1、CSS3 :target Selector

当浏览器地址里的hash(地址里#号后面的部分)和:target伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

eg：<a href="#link1">Link 1</a>

<h3>Content to Link 1</h3>

<p>Hello World!</p>

</div>

div {

display: none;

}

div:target {

display: block;

}

2、HTML DOM nextSibling Property

nextSibling属性返回在DOM树同级上，紧跟指定节点之后的节点。返回值为一个Node对象。

nextSibling与nextElementSibling区别为，nextSibling返回相邻的元素节点、文本节点或者评论节点，nextElementSibling返回相邻元素节点（不包括文本节点和评论节点）。

此属性为只读属性。

注意：使用previousSibling属性，返回制定节点DOM树同级上，之前节点。使用childNodes属性，返回指定节点的子节点。

语法：

node.nextSibling

返回值：节点对象，代表node节点相邻的下一个节点，如果没有下一个节点返回null。

3、已提交作业

巴特西