body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
        .hover-span {
            color: #333333;
            font-weight: normal;
            text-decoration: none;
            background-color: transparent;
            padding: 2px 5px;
            transition: all 0.1s ease;
            display: inline-block; /* 确保某些效果正常显示 */
        }

        .hover-span:hover {
            color: #219241;           /* 变色 */
            background-color: #f0f0f0; /* 背景色变化 */
            border-radius: 2px;       /* 圆角 */
            box-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* 阴影 */
            transform: translateY(-1px); /* 轻微上移 */
        }
        
        .hover-span-red {
            color: #333333;
            font-weight: normal;
            text-decoration: none;
            background-color: transparent;
            padding: 2px 5px;
            transition: all 0.1s ease;
            display: inline-block; /* 确保某些效果正常显示 */
        }

        .hover-span-red:hover {
            color: #E63F31;           /* 变色 */
            font-weight: 700;        /* 变粗 */
            background-color: #f0f0f0; /* 背景色变化 */
            border-radius: 2px;       /* 圆角 */
            box-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* 阴影 */
            transform: translateY(-1px); /* 轻微上移 */
        }
                        
    .tree{

margin-top: 40px;

padding-left: 10px; /*本来默认是40px*/

}

a{

color: #4C4C4C;

text-decoration: none;

/*去掉a标签的特性 a标签默认字体蓝色 下面带一个横线 */

}

li a{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYdJREFUeNqMksFqwkAQhmc3W4q0OSq09170LdJzb32IvkQVpIeeS6Gehdz6AkUoePOYe71VEBGiVkUxyaYzY9bENIYuTDbZ3f/b+Wci7ptNoCGEuMPpCsrHp9Z6qKMI4jjmBWVecL7utlqdHW4GFFpDhHtm3/M86PZ6D3QXxpchSqIlITSJgoBjt93CZr2G1WoFy+WS5/d2u4PnblF3YwAqQnEyBKElPs8sK006DCFEsO/78Oq64NTrby+u+4g7TwzQKUCSWDIG/kAcx2E7tm3Dh+fNDhmE2QwygCIIZcKvaDe1gBt5C9mRh9AlqCkE7C1ICZDcVASx9gCZWsgADhmUQCycwxMArgHXYZ9PIcTC9fDIAvY8nwHJTkHYQhCcsEAZYKvKIIJrmbGwGI/holo96oIugdC6sbCeTkEO+33wRyP6bVVSCD5kYOabumPW6SxpSEsXVL4Hg9piNjvPVPMgoKJRKCygUoq7QGdJQ1q6tYJR+5lM5peNxjP8Y+jNZk4aKsevAAMAmFzedjV8x2YAAAAASUVORK5CYII=) no-repeat;

/*给普通文件设置图标*/ /*图片全部使用base64*/

padding-left: 20px ;

}

li{

list-style: none;

position: relative; /* 和input配合*/

}

li input{

opacity:0; /*为了让checkbox消失*/

cursor:pointer; /*小手*/

position: absolute; /*为了让label可以设置成块级元素 因为label需要进行图标和文字的偏离*/

}

label{

display: block;

padding-left: 20px; /*让文字和图标分离*/

margin-left: 20px ; /*因为压在加号图标上 需要 整体向右移动 */

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATNJREFUeNqkk71KA1EQhc/dOxsbEYukVYm9jQg+hz6CYGkrBNsEKwtrX0EfwU4UVFDLFWSDlYGAGszP3p91ZlNpdoVrBg572bnf2ZlhR+V5jnmCbo9VZTJS2ODHbkX63Od4Ij7ssdbKbvAFbB76o2GWYTAe42sywX7aQL8/xNnjYsRXttR1G+3tg4tW7twPWGmNXvJcnBvrzRlzyd+c7nTIeWjPXxD9jjqDb0mC9O6+tAdhpwbWQDTTwsCgvrpSCksFr1dsYAsDC1diUETFe11bgC0qcCBnMoiCQikIS9ZxBcawgQnkIwgrBiT9h1YQRYUBkfFTA2/DKvA8RGGJ5xf/OcSK0JogLH2MsCS/VKzjsBZYwtJDiu7nSevyP4v00kNXNqnGWpbFCuQt613Nu87fAgwAb3KTD1NdyNYAAAAASUVORK5CYII=) no-repeat; /* 文件夹图标*/

cursor: pointer;

}

.tree ol{

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAURJREFUeNpi/P//PwMlgImBQkCxASwwRlLLKwYmJqZgRkbGbiBXEYva+0Dvlv7792/tvBoxTAO+fv0MororE6UU9VU5MHRfvP1DsX3+M5DhaxkYxDC98ObNGxBW1FVmY/j16xcYu6SdYvjw4QPDixcvGGSEvoLlQeqweuHdu7dg+vfv32D85ctXsNijR4/B4hwcnHA1WA348uUbmP779y+DUchOuIKQsltgetsUE7garAb8/w9h/vz5h+H0Sk8w2yRsN8OZVa5g9ocPn+BqsBrAzs4PdQEzw48ff+Fi375B2Gxs3HA1WNPB45NlDNzcIvfPXv8LVMwJxmdWOcDZF2//A8uD1GF1wefXZ8Q+Pt42oWN+VBED41d5DKv+/30IlJ8IVCcF5D2DCTPC8gIwAXEDKT4Qk0Di+wzU8xnDgKGbmQACDAAtTZadqmiADQAAAABJRU5ErkJggg==) no-repeat; /*在ol上设置加号图标*/

background-size:16px 16px;

/*border: 1px solid;*/

/*position: relative;

top: -20px;

padding-top: 20px ;*/

margin-top: -15px; /*现在想把加号图标移动到checked选框上 向上移动*/

padding-top: 20px ;

}

.tree ol > li { display: none;} /*将全部子文件隐藏*/

input:checked ~ ol > li{

display: block; /*兄弟选择器 当check被选中时 将它下面消失的元素出来*/

}

input:checked ~ ol {

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASxJREFUeNpi/P//PwMlgImBQkCxASwwRlLLKwYmJqZgRkbGbiBXEYva+0Dvlv7792/tvBoxTAO+fv0MororE6UU9VU5MHRfvP1DsX3+M5DhaxkYsBjw5s0bEKWoq6zA8OvXL7AYKIC/f//O8OPHDwYZIVaQGqjLlDENePfuLZj+/fs3GH/58pXh/fv3YDYIcHBwwtVgDYMvX76B6b9//zIYhezEULhtiglcDVYD/v+HMH/+/MNweqUnhsIPHz7B1WA1gJ2dH+oCZqCf/2IoZGPjhqvBmg4enyxj4OYWuX/2+l+gYk4MfPH2P7A8SB1WF3x+fUbs4+NtEzrmRxUxMH6Vx7Dq/9+HQPmJQHVSQN4zmDAjLC8AExA3kOIDMQkkvs9APZ8xDBi6mQkgwADDMYZH9Ls66AAAAABJRU5ErkJggg==) no-repeat; /*兄弟选择器 当check被选中时 将ol的图标变成减号*/

background-size:16px 16px;

}