CSS中樹的單詞有哪些?
.tree { margin: 0; padding: 0; list-style: none; } .tree li { margin: 0; padding: 10px 16px; position: relative; } .tree li:before, .tree li:after { content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #ccc; width: 50%; height: 1em; } .tree li:after { right: auto; left: 50%; border-left: 1px solid #ccc; } .tree li:first-child:before { border: none; } .tree .active:before, .tree .active:after { border-color: #008000; } .tree li:last-child:before { height: auto; bottom: 0; top: 0; border-bottom: 1px solid #ccc; } .tree li:last-child:before { height: auto; bottom: 0; top: 0; border-bottom: 1px solid #ccc; } .tree li:last-child:after { display: none; } .tree li.parent_li >span { cursor: pointer; position: relative; left: -6px; } .tree li.parent_li:before { content: ''; position: absolute; left: -45px; bottom: 50px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 25px; width: 35px; top: 50%; z-index: 1; } .tree li.parent_li:after { content: ''; position: absolute; left: -17px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; top: 12px; height: 50%; width: 20px; z-index: 1; } .tree li.parent_li >span:before { content: ''; position: absolute; border-top: 1px solid #ccc; top: 14px; left: -18px; width: 18px; height: 0; } .tree li.parent_li >span:after { content: ''; position: absolute; border-left: 1px solid #ccc; top: 16px; left: -20px; height: 0; width: 0; }
CSS中樹的單詞主要是列表相關的樣式,通過設置列表項和子項的樣式實現樹形結構。其中,parent_li表示父級列表項的樣式。