demo_07选择器练习

Posted 2020-08-03 vmanas

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了demo_07选择器练习相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        body{
            background-color: #bbc;
        }
        header{
            width: 100%;
            text-align: center;
            height: 50px;
            margin-top: 20px;
            line-height: 50px;
            font-family: "微软雅黑";
            font-size: 25px;
            color: #DDFFFF;
            letter-spacing: 2px;
        }
        table{    
            margin: 100px auto;
        }
            table td{
                width: 100px;
                height: 30px;
                text-align: center;
                color: #333;
            }
            tr:first-child{
                background-color: #ddd;
            }
            tr:nth-last-child(2){
                background-color: #def;
            }
            tr:nth-child(2){
                background-color: #fde;
            }
            tr:nth-child(3){
                background-color: #dff;
            }
            tr:last-child{
                background-color: #fbc;
            }
            td:nth-last-child(4){
                background-color: #bcf;
            }
            tr:nth-child(2)>td:nth-child(2){
                background-color: #dbf;
            }
            tr:nth-child(4) td:nth-child(3){
                background-color: #bac;
            }
            td[style]{
                background-color: #dac;
            }
            td[class~="name"]{
                background-color: #efadcb;
            }
            td[class*="set"]{
                background-color: #defacb;
            }
            td[class*="set"]+td+td{
                background-color: #3d21bc;
            }
        </style>
    </head>
    <body>
        <header>
            CSS3选择器练习
        </header>
        <section>
            <table cellpadding="0" cellspacing="3">
                <tr>
                    <td>11</td>
                    <td class="name set">12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                    <td class="name">26</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td>32</td>
                    <td>33</td>
                    <td class="name">34</td>
                    <td>35</td>
                    <td>36</td>
                    <td>37</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td>32</td>
                    <td>33</td>
                    <td>34</td>
                    <td>35</td>
                    <td>36</td>
                    <td style="">37</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td>32</td>
                    <td>33</td>
                    <td>34</td>
                    <td>35</td>
                    <td>36</td>
                    <td>37</td>
                </tr>
            </table>
        </section>
    </body>
</html>

以上是关于demo_07选择器练习的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 选择器demo练习

python选课系统demo的小练习

在标签片段android中添加谷歌地点选择器

VSCode自定义代码片段——CSS选择器

Vue练习五十八：07_03_移动效果(按轨迹移动)