CSS高级选择器

层次选择器

1；后代选择器  ；在某个元素后

2；子选择器

3；相邻选择器

4；通用选择器

 

1；后代选择器   

<style>

  /* p{ */
        /*background: #02ff00;  */
        /* }*/
    /*后代选择器*/
body p{
    background: blueviolet;
}
        
    </style>


2；子选择器

/*子选择器*/

/*子选择器；当前下面的一代*/

body>p{
    background:ghostwhite ;
}

3；兄弟选择器

/*相邻兄弟选择器；相邻的元素，上和下*/

.active +p{
    background: deeppink;
}

4；通用选择器

/*通用选择器,选中当前元素下的所有元素*/

.active~p{
    background: #02ff00;
}

结构伪类选择器

代冒号的是伪类

<style>

    /*ul的第一个子元素*/
    /*ul的最后一个子元素*/
    ul li:first-child {
        background: #02ff00;
    }
    ul li:last-child{
        background: red;
    }

</style>

  }

不重要  
/* 选中p1；定位到父元素，选中当前的第一个元素；按顺序选择
选择当前p元素的父级元素，喜欢中父级元素的第一个，并且是当前元素才行
*/
 p:nth-child(1){
     background: #02ff00;
 }
  /*父类元素中寻找，按类型选择*/
  p:nth-of-type(2){
      background: fuchsia;
  }
  

属性选择器
=：绝对等于
*=：包含
^=:以...开头
$=:以...结尾

a[id]{
   background: #02ff00;
}
    a[id =first]{
        background: fuchsia;
    }

id  +class