CSS样式的无序列表

Question

我有10个UL，每个UL有5个LI。它看起来像一张桌子，但我想在项目后面留下背景。 我想这样做一个小时。它甚至可能吗？

ul {
background: whitesmoke;
padding-top: 0px;
}
ul:nth-child(odd) { background: ghostwhite; }
li:nth-child(3n) {
font-weight: bold;
color: white;
}

li:hover {
background-color: greenyellow;
}

ul:hover {
background-color: yellow;
}

li{
display: inline-table;
padding-top: 0px;
}

ul {
font-size: 1px;

}

ul li {
font-size: 14px;
display: inline-block;
width: auto;
}

Answer 1

所以我真的不明白你的问题是什么，或者我是否提供了正确的答案，但我有这个：

实施例

ul {
    padding: 0px;
    font-size: 1px;
}

ul:nth-child(odd) li{
    background: black;
    color: blue;
}

ul:nth-child(odd) li:hover{
    background: white;
}

ul:nth-child(odd) li:nth-child(3n){
    font-weight: bold;
    color: white;
    background: #999;
}

ul:nth-child(odd) li:hover:nth-child(3n){
    background: darkblue;
}

li:nth-child(3n){
    font-weight: bold;
    color: white;
    background: #333;
}

li:hover:nth-child(3n){
    background: darkgreen;
}

li:hover {
    background: lightblue;
}

li{
    display: inline-table;
    padding: 0;
    padding-left: 2px;
    padding-right: 2px;
}

ul li {
    color: green;
    font-size: 14px;
    display: inline-block;
    width: auto;
}

<ul>
    <li>ul 1 ListItem 1</li>
    <li>ul 1 ListItem 2</li>
    <li>ul 1 ListItem 3</li>
    <li>ul 1 ListItem 4</li>
    <li>ul 1 ListItem 5</li>
</ul>
<ul>
    <li>ul 2 ListItem 1</li>
    <li>ul 2 ListItem 2</li>
    <li>ul 2 ListItem 3</li>
    <li>ul 2 ListItem 4</li>
    <li>ul 2 ListItem 5</li>
</ul>
<ul>
    <li>ul 3 ListItem 1</li>
    <li>ul 3 ListItem 2</li>
    <li>ul 3 ListItem 3</li>
    <li>ul 3 ListItem 4</li>
    <li>ul 3 ListItem 5</li>
</ul>
<ul>
    <li>ul 4 ListItem 1</li>
    <li>ul 4 ListItem 2</li>
    <li>ul 4 ListItem 3</li>
    <li>ul 4 ListItem 4</li>
    <li>ul 4 ListItem 5</li>
</ul>