鍍金池/ 問答/HTML5  Java  HTML/ 如何給每個(gè)li標(biāo)簽設(shè)置不同的顏色

如何給每個(gè)li標(biāo)簽設(shè)置不同的顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="logo">
        <ul>
            <li>123123</li>
            <li>2312312</li>
            <li>sjfsdf</li>
            <li>sdfsdaf</li>
            <li>sdfagag</li>
            <li>sdfafsf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
            <li>sdafafasdf</li>
        </ul>
    </div>
</body>
</html>

總共4個(gè)顏色
第一個(gè)li是紅色
第二個(gè)li是藍(lán)色
第三個(gè)li是黑色
第四個(gè)li是黃色

第5-8li再重復(fù)上面的顏色 以此類推
純css 能實(shí)現(xiàn)嗎？ 有沒有好一點(diǎn)的寫法

回答
編輯回答
雨蝶

能實(shí)現(xiàn)啊, :nth-child(4n) 這種css選擇器了解一下

2018年7月31日 05:04
編輯回答
孤星
ul:li:nth-child(4n+1){
    color: red;
}
ul:li:nth-child(4n+2){
    color: blue;
}
ul:li:nth-child(4n+3){
    color: black;
}
ul:li:nth-child(4n){
    color: yellow;
}
希望能幫助到您，歡迎關(guān)注我的微信公眾號(hào)：前端指南
2017年6月29日 19:25