纯css实现tab切换中遇到的问题

陈耀耀更新问题整理

楔子

最近做的一道百度ife中的题目遇到关于tab切换，而本人还没学到js，从而需要用css写出tab切换demo css见github 从578至665行

table

table中我们可以加入如下的css来使表格中的线为一根线

html:
   <table border="1"></table>
css:
   table{
        border-collapse:collase;
        border-spacing;
   }

问：css中的~是什么？

这是 CSS3 element1~element2 选择器

定义和用法　　element1~element2 选择器 element1 之后出现的所有 element2。　　两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

实例：为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

    p~ul{
        background:#ff0000;
    }

来源：https://zhidao.baidu.com/question/1691564837342076508.html

问：Class^=,Class*= ,Class$=含义

<div class="xxx">
    <div class="span"></span>         <!-- 1-->
    <div class="spanabc"></span>      <!-- 2-->
    <div class="abcspan"></span>      <!-- 3-->
    <div class="abcspanabc"></span>   <!-- 4-->
</div>

.xxx [class*=“span”] 是指.xxx里面所有的包含span的选择器即以上四个都是

.xxx [class^=“span”] 是指.xxx里面以span开头的即1 2是

.xxx [class$=“span”] 是指.xxx里面以span结尾的即1 3是

:checked 是什么？

这是伪类选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

来源： W3School

问：z-index在css中怎么用？

答1：当你定义的CSS中有position属性值为absolute、relative或fixed，

用z-index此取值方可生效。此属性参数值越大，则被层叠在最上面。例子：

<html>
<head>
<style>
.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}
.z1{z-index:1;background:#000;}
.z2{z-index:2;top:30px;left:30px;background:#C00;}
.z3{z-index:3;top:60px;left:60px;background:#999;}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>

上面三个CSS，将根据z-index的值决定谁在最上层！

答2： z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上，注意，z-index没有单位，z-index：99；这样写就够了

来源：https://zhidao.baidu.com/question/416073543.html

陈耀耀

日常记录