CSS知识点

CSS知识点

1.层次选择器

   /*后代选择器*/
        body p{
            background-color: rebeccapurple;
        }

    /*子选择器*/
        body>p{
            background-color: rebeccapurple;
        }

    /*相邻兄弟选择器*/
       .action +p{
          background-color: #dddddd;
       }

     /*通用兄弟选择器 当前选中元素的向下的所有元素*/
       .action~{
          background-color: #dddddd;
       }

2.结构伪类选择器

     ul li:first-child{
           background-color: #a9c1ed;
       }
        ul li:last-child{
            background-color: #fac0e7;
        }
        
        /*选中当前元素的父级元素下的元素，是顺序*/
           p:nth-child(1){
            background-color: #fac0e7;
        }
        /*选中父元素下的p的第二个，是类型*/
        P:nth-of-type(2){
            background-color: rebeccapurple;
        }

3.属性选择器

==绝对等于
*=包含等于
^=以这个开头
$=以这个结尾

   /*存在id*/
        a[id=first]{
            background-color: rebeccapurple;
        }
        /*class元素的定位*/
        a[class*="circle"]{
           background-color: #fac0e7;
        }
         /*a标签中href中以http开头的元素*/
        a[href^=http]{
           background-color: rgba(134,179,220,0.16); 
        }
           /*a标签中href中以abc开头的元素*/
        a[href$=abc]{
            background-color: rgba(134,179,220,0.16);
        }
        

4.文本样式

5.定位

记得点赞哦