CSS笔记(二)

1.复合选择器

/* 将class为red的元素设置为红色（字体） */
        .red{
            color: red;
        }

        /* 将class为red的div字体大小设置为30px */
        /* 
            交集选择器
                作用：选中同时复合多个条件的元素
                语法：选择器1选择器2选择器3选择器n{}
                注意点：
                    交集选择器中如果有元素选择器，必须使用元素选择器开头
        */
        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue
        }

        /* div#box1{} */

        /*
            选择器分组（并集选择器）
                作用：同时选择多个选择器对应的元素
                语法：选择器1,选择器2,选择器3,选择器n{}

                #b1,.p1,h1,span,div.red{}
         */
        h1, span{
            color: green
        }




    
我是div

    
我是p元素

    
我是div2

    
标题

    哈哈

    

2.关系选择器

/* 
            为div的子元素span设置一个字体颜色红色
            （为div直接包含的span设置一个字体颜色）

            子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
         */

        /* div.box > span{
            color: orange;
        } */

        /* 
            后代元素选择器：
                作用：选中指定元素内的指定后代元素
                语法：祖先 后代
         */
         /* div span{
             color: skyblue
         } */

         /* div > p > span{
             color: red;
         } */

         /* 
            选择下一个兄弟
                语法：前一个 + 下一个
            选择下边所有的兄弟
                语法：兄 ~ 弟
          */

          p + span{
              color: red;
          }


          p ~ span{
              color: red;
          }



    

        我是一个div
        

            我是div中的p元素
            我是p元素中的span
        
        

        我是div中的span元素
        我是div中的span元素
        我是div中的span元素
        我是div中的span元素

    

    
        我是div外的span
    

3.属性选择器

    
        
少小离家老大回
        
乡音无改鬓毛衰
        
儿童相见不相识
        
笑问客从何处来
        
秋水共长天一色
        
落霞与孤鹜齐飞
    

4.伪类选择器

'''

    /* 
        将ul里的第一个li设置为红色
     */

    
    伪类（不存在的类，特殊的类）
        - 伪类用来描述一个元素的特殊状态
            比如：第一个子元素、被点击的元素、鼠标移入的元素...
        - 伪类一般情况下都是使用:开头
            :first-child 第一个子元素
            :last-child 最后一个子元素
            :nth-child() 选中第n个子元素
                特殊值：
                    n 第n个 n的范围0到正无穷
                    2n 或 even 表示选中偶数位的元素
                    2n+1 或 odd 表示选中奇数位的元素

                - 以上这些伪类都是根据所有的子元素进行排序

            :first-of-type
            :last-of-type
            :nth-of-type()
                - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

        - :not() 否定伪类
            - 将符合条件的元素从选择器中去除

    /* ul > li:first-child{
        color: red;
    } */

    /* ul > li:last-child{
        color: red;
    } */

    /* ul > li:nth-child(2n+1){
        color: red;
    } */

    /* ul > li:nth-child(even){
        color: red;
    } */

    /* ul > li:first-of-type{
        color: red;
    } */

    ul > li:not(:nth-of-type(3)){
        color: yellowgreen;
    }




    我是一个span
    
第〇个
    
第一个
    
第二个
    
第三个
    
第四个
    
第五个

'''