css高级选择器

伪类选择器

优点：避免起类名，防止数据渲染类名的时候丢失样式（权重都是0010）

-child结尾的 5个  都是选择某个父元素下面的某个或者某些子元素

1）匹配元素内第一个子元素 :first-child{样式规则}
含义：子元素无论是否与父元素为同样的标签, 只查找当前元素 ( 父元素 ) 内 , 第一个子元素;

2) 匹配元素内最后一个子元素 :last-child{样式规则} 
含义 : 子元素无论是否与父元素为同样的标签, 只查找当前元素 ( 父元素 ) 内 , 最后一个子元素;

3) 匹配第几个子元素 :nth-child(参数){样式规则} 
含义 : 子元素无论是否与父元素为同样的标签, 只查找当前元素 ( 父元素 ) 内 , 第几个子元素, 代表的是从第一个开始向后面数;
4) :nth-last-child(){} 倒数第几个元素或某些元素变
5) :only-child{} 只有唯一一个子元素变

?注意 : 参数取值可以为数值, 也可以为关键词和公式
a) 数值 则代表的是第几个子元素
b) 关键词 : odd代表的是奇数位的子元素;  even代表的是偶数位的子元素
c) 公式 : n代表一个自然数; 2n则代表偶数; 2n+1 / 2n-1 则代表奇数 n支持正和负数,也支持+和*的参与

-type结尾的 5个都是选择某个父元素下面的某个或者某些同类型(相同标签)的子元素
:first-of-type{}
:last-of-type{}
:nth-of-type(){}
:nth-last-of-type(){}
:only-of-type{}


-child和-type的结尾的区别在于 
child只看子元素不看类型(就好比问有多少人)
type选择的是同类型的某个或者某些子元素 (就好比问有多少女生) 

否定伪类
含义:排除掉否定某一类元素
基本语法: :not(被排除掉的元素(书写的是选择器)){}

/* 此处的p必须是 其父元素div中的第一个子元素才行 */
/* 如果父元素的第一个子元素，不是p，则不起作用 */
       /*  p:first-child{
            background-color: blueviolet;
        } */
        
 /* 此处的h1必须是 其父元素div中的最后一个元素才行 */
/* 如果最后一个元素不是h1的时候，其就没有效果了 */
        /* h1:last-child{
            background-color: aqua;
        } */

/* <h3>父元素中，第3个元素恰好也为<h3>时则有效果（实测，如果其第3个不是h3的话，没有效果） */
        /* h3:nth-child(3){
            background-color: green;
        } */
        
/* 匹配同类型标签的第几个 */
/* 匹配的是div里面的第2个p标签 */
        /* div>p:nth-of-type(2){
            background-color:red
        }   */
/* 匹配的是div里面的第3个h1标签 */
        /* div>h1:nth-of-type(3){
            background-color: blueviolet;
        } */
        
        <p>第一个子元素</p>
        <h1>第二个子元素</h1>
        <h3>第三个子元素</h3>
        <p>第四个子元素</p>
        <p>第五个子元素</p>
        <h1>第六个子元素</h1>
        <h1>第七个子元素</h1>
        <p>1111111</p>
        <h1>2222222</h1>

属性选择器

（ 权重是0010）

适合img  input  a 这三个标签
含义:通过元素的标签属性,进行查找页面的元素,使用符号[]
基本语法:[属性]/E[属性]/[属性="属性值"]/E[属性="属性值"]
  注: []是属性选择器的必备方法
		E是element元素 是否带E,决定了匹配的元素中是否为相同的标签
		
	写法1:  [属性]{} 选择到具有该属性的标签变
	写法2:  [属性="属性值"]{} 选择到具有该属性和该属性值的标签变,注意点CSS选择器中书写[]内容必须跟下面的html的属性是一模一样的,多个或者是少个空格都不行

/*  [class="box1"] 匹配的是页面中带有class属性 并且取名为box1的元素 */
        [class="box1"]{
            background-color:violet;
        }

/* div [class="box1"] 匹配的是div标签中带有class属性并且取名为box1的元素 */
        /* div [class="box1"]{
            background-color: springgreen;
        } */
        
     <div class="box1">111111</div>
     <div class="box2">222222</div>
     <h3 class="box1">h111111</h3>

伪元素选择器

（权重是0001）

基本语法:
 1) 选择器1: first-letter{样式规则}
	用来匹配元素内的第一个字符
 2) 选择器1: first-line{样式规则}
	用来匹配元素内的第一行字符
以上只能于竖着排列的标签  横着排列的不支持

3) 选择器1: before{content:"";样式规则}
	用来向元素内部正前方插入内容,内容需要写在content里
4) 选择器1: after{content:"";样式规则}
	用来向元素内部正后方插入内容,内容需要写在content里
	如果content书写的文本内容,必须带有引号
    如果是content书写的是图片,不需要带引号,书写url地址即可
以上四个可以写单冒号: 也可以下双冒号::

5) ::selectio{} 修改选中之后的样式,只能用双冒号::
                只支持背景颜色和文字颜色的修改

div:nth-of-type(1)::first-letter{
      font-size: 80px;
      color: red;
    }

div:nth-of-type(2)::first-line{
      font-size: 30px;
      color: blue;
    }
div:nth-of-type(3)::selection{
      color: red;
      background-color: green;
    }
div:nth-of-type(4)::after{
      content: '我是后面的';
      width: 200px;
      height: 200px;
      background-color: orchid;
      /* display: block;可以该after支持宽高 */
      font-size: 20px;
      color: red;
    }
div:nth-of-type(6)::before{
      content: '我是前面的';
      font-size: 20px;
      color: red;
      width: 100px;
      height: 100px;
      display: block;
      background-color: blue;
    }