第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

一，属性选择器

特点其通过的英文属性来选择元素，具体有以下5种形式：

1，E [attr]表示存在attr属性即可;

   DIV [类]

2，E [attr = val]表示属性值完全等于val ;

   DIV [类= mydemo]

3，E [ATTR * = VAL]表示的属性值里所有游戏VAL字符并且在“ 任意 ”位置;

     div [class * = mydemo]

4，E [attr ^ = val]表示的属性值里包含val字符并且在“ 开始 ”位置;

      的div [类^ = mydemo]

5，E [attr $ = val]表示的属性值里包含val字符并且在“ 结束 ”位置;

 　的div [类$ =演示]

二，伪类选择器

除了以前学过的：link，：active，：visited，：hover，CSS3又新增了其它的类类选择器。

1，以某元素相对于其父元素或兄弟元素的位置来无电子杂志素的结构伪类。

重点理解通过é来确定元素的父元素。

• E：第一胎   第一个子元素
• E：最后一个孩子    最后一个子元素
• E：第n个孩子（N）   第ñ个子元素，计算方法是 Ë元素的全部兄弟元素 ;

  div> ul> li：nth-child（3）{//选中第三个li 颜色：deeppink  ;
           

}  

E：第n-最后一个孩子（N）同 E：第n个孩子（N）相似，只是倒着计算;

div> ul> li：last -child（2 ）{//选中倒数第二个li 颜色：deeppink;
         

}

 2，  n遵循线性变化，其取值0,1,2,3,4，...但是当n <= 0时，选取无效。

（1）  选中所有的奇数的利

   li：nth-​​child（2n-1）{
       color：red;
   }

（2）选中所有的7的倍数的li

li：nth-​​child（7n）{
      color：red;
    }
 （3）  选中前面五个
   锂：第n个孩子（-n + 5）{
       颜色：红;
   }
  （4）选中后面五个
   锂：nth- 最后柴尔德（-n + 5）{

 红色;
   }
   （5）所有的偶数
   李：第n个孩子（甚至）{
      颜色：红
   }
  （6） 所有的奇数
   李：第n个孩子（奇数）{
      颜色：蓝;
   }

注意：

n可以多种形式：nth-child（2n），nth-child（2n + 1），nth-child（-1n + 5）等;

E：空 选中没有任何子节点的ë元素;（使用不是非常广泛）

没有任何的子元素，包括空格。

3，目标伪类

E：目标 结合锚点进行使用，处于当前锚点的元素会被选中 ;

      <li> <a href="#title1 "> CSS（层叠样式表）</a> </ li>

  <h2 id =“ title1 ”> CSS（层叠样式表）</ h2>

   H2：目标{

    红色;

  }

三，第n个选择器

1.  ：第一胎  选择某个元素的第一个子元素;
2.  ：最后一子  选择某个元素的最后一个子元素;
3.  ：第n个孩子（）  选择某个元素的一个或多个特定的子元素;
4.  ：第n-最后孩子（）  选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算;
5.  ：第n的类型（）  选择指定的元素;
6.  ：第n-最后的式（）  选择指定的元素，从元素的最后一个开始计算;
7.  ：第一的型  选择一个上级元素下的第一个同类子元素;
8.  ：最后的型  选择一个上级元素的最后一个同类子元素;
9.  ：独生子女  选择的元素是它的父元素的唯一一个了元素;
10.  ：只有-的型  选择一个元素是它的上级元素的唯一一个相同类型的子元素;
11.  ：清空  选择的元素里面没有任何内容。

四，伪元素选择器

重点：E ::之前，E ::之后

一个的英文行内元素，需要转换成块元素

E：之后，E：之前在旧版本里是一类，在新版本里是伪元素，新版本下E：之后，E：之前会被自动识别为E :: after，E :: before，按a元素来对待，这样做的目的是用来做兼容处理。

Ë::第一字母的   字幕：的第一个字母或字（如中文，日文，韩文等）;

案例：首字下沉

E ::一线 文本第一行 ;文本第一行高亮..

Ë::选择 可改变选中文本的样式;

“：”与“::”区别在于区分伪类状语从句：伪元素

  关于      CSS2 之前和之后
E ：之前或者E：之后，是属于伪类的，并且没有伪元素的概念
      CSS3中提出伪元素的概念E :: before和E :: after，并且归属到了伪元素当中伪类里就不再存在E：之前或者    E：后伪类;