css3-属性、伪类、nth-child选择器

最新推荐文章于 2021-04-06 11:13:15 发布

约德尔蒙

最新推荐文章于 2021-04-06 11:13:15 发布

阅读量684

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263886

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 伪类：
           ：link   ：hover  :active  :visited
           伪类的特点：以 ：开头
       */
        .box{
            width: 600px;
            height: 430px;
            margin:100px auto;
        }

        .box div{
            width: 80px;
            height: 80px;
            border: 1px solid #333;
            text-align: center;
            line-height: 80px;
            color:#666;
            float: left;
            font-size:24px;
            margin-top:-1px;
            margin-left:-1px;
        }


        /*基本选择器*/
        /*
        div：标签选择器
        .box:类选择器
        #box:id选择器
        div p：后代选择器
        div.active: 标签指定选择器
        div,p,span：并集选择器
        div>span： 子代选择器
        div~p: 选中div 后面所有的同级p标签
        div+p: 选择div后面的第一个同级的p标签
       */

/*--------------------属性选择器----------------------------*/
        /*属性选择器
        id选择器  #
        类名选择器：.
        属性选择器：[]
    */
     /*
         E[attr]：选中带有arrt 属性的E元素
         E[attr="val"]:选中带有attr属性，且attr值为"val“的E元素
         ^ :开头  $:结束  *：包含
         E[attr^="val"]:选中带有attr属性，且attr值为以"val“开头的E元素
         E[attr$="val"]:选中带有attr属性，且attr值为以"val“结尾的E元素
         E[attr*="val"]:选中带有attr属性，且attr值为包含"val“的E
     */


        /*div[title]{*/
        /*background-color: red;*/
        /*}*/

        /* 选中页面中的div 并且带有 class属性*/
        /*div[class]{*/
        /*background-color: red;*/
        /*}*/

        /* 选中页面中的div 并且带有 class属性， 属性的值等于 box7*/
        /*div[class="box7"]{*/
        /*background-color: red;*/
        /*}*/

        /* 选页面中div  并且 带有class属性，class属性以 aa开头*/
        /*div[class^="aa"]{*/
        /*background-color: red;*/
        /*}*/

        /* 选页面中div  并且 带有class属性，class属性以 bb结尾*/
        /*div[class$="bb"]{*/
        /*background-color: red;*/
        /*}*/

        /* 选页面中div  并且 带有class属性，class属性中包含 aa*/
        /*div[class*='aa']{*/
            /*background-color: red;*/
        /*}*/

/*-----------------------------伪类选择器----------------------------------------------------------*/
        /* 伪类选择器
           : 标志性符号

       */

        /* 选中 box 下面的div 第父盒子 中的第一个子元素*/
        /*.box div:first-child{*/
        /*background-color: red;*/
        /*}*/

        /* 选中 box 下面的div 第父盒子 中的最后一个子元素*/

        /*.box div:last-child{*/
        /*background-color: red;*/
        /*}*/

        /*选中box下的第18个盒子 */
        /* :nth-child(n) n是也给整数 从1开始  1，2,3,4,5....
            如果n小于等于0 无效  n ：正整数+0
        */

        /*.box div:nth-child(28){*/
        /*background-color: red;*/
        /*}*/

        /* 选中所有的box 下的div*/
        /*.box div:nth-child(n){*/
        /*background-color: pink;*/
        /*}*/

        /* 2n 选中所有的偶数*/
        /*.box div:nth-child(2n){*/
        /*background-color: red;*/
        /*}*/

        /* 2n-1 奇数*/
        /*.box div:nth-child(2n+1){*/
        /*background-color: red;*/
        /*}*/

        /* 奇数：odd  偶数：even*/

        /*.box div:nth-child(odd){*/
        /*background-color: red;*/
        /*}*/

        /*.box div:nth-child(even){*/
        /*background-color: yellow;*/
        /*}*/

        /* 选中7的倍数+1 */
        /*.box div:nth-child(7n+1){*/
        /*background-color: red;*/
        /*}*/

        /*选中前5个*/
        /*.box div:nth-child(-n+5){*/
        /*background-color: red;*/
        /*}*/

        /*选中后5个*/
        /* nth-last-child 从最后面开始选*/
        .box div:nth-last-child(-n+5){
            background-color: red;
        }




    </style>
</head>
<body>
        <div class="box" title="我是第一个盒子" ></div>
        <div class="aabox1">1</div>
        <div class="bbbox2">2</div>
        <div class="box3aa">3</div>
        <div class="box4bb">4</div>
        <div class="aabox5bb">5</div>
        <div class="bbbox6aa">6</div>
        <div class="box7">7</div>
        <div >8</div>

<!------------------------伪类盒子练习---------------------------------------------------------->
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
            <div>13</div>
            <div>14</div>
            <div>15</div>
            <div>16</div>
            <div>17</div>
            <div>18</div>
            <div>19</div>
            <div>20</div>
            <div>21</div>
            <div>22</div>
            <div>23</div>
            <div>24</div>
            <div>25</div>
            <div>26</div>
            <div>27</div>
            <div>28</div>
            <div>29</div>
            <div>30</div>
            <div>31</div>
            <div>32</div>
            <div>33</div>
            <div>34</div>
            <div>35</div>
        </div>
</body>
</html>

约德尔蒙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3-属性、伪类、nth-child选择器

/* 伪类：：link ：hover :active :visited 伪类的特点：以：开头 */ .box{ width: 600px; height: 430px; margin:100px auto; }
复制链接

扫一扫