一些关于css3的知识

介绍：

• CSS3 是CSS2 的“进化”版本， 在CSS2 基础上， 增强或新增了许多特性， 弥补了CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。CSS3 新增了许多灵活查找元素的方法，极大的提高了查找元 素的效率和精准度。CSS3 选择器与jQuery中所提供的绝大部分选 择器兼容。
• 属性选择器

   其特点是通过属性来选择元素，具体有以下 5 种形式：
	    1、E[attr] 表示存在attr 属性即可； div[class]
	    2、E[attr=val] 表示属性值完全等于val； div[class=mydemo]
	    3、E[attr*=val] 表示的属性值里包含val 字符并且在 “任意”位置；div[class*=mydemo]
	    4、E[attr^=val] 表示的属性值里包含val 字符并且在 “开始”位置； div[class^=mydemo]
	    5、E[attr$=val] 表示的属性值里包含val 字符并且在 “结束”位置； div[class$=demos]

• 伪类选择器

         E:nth-child(n) 第n 个子元素，计算方法是E 元素的全部兄弟元素； 
		 div>ul>li:nth-child(3){ color: deeppink; } 
		
		 第三个元素 E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；
		 div>ul>li:last-child(2){ color: deeppink;

     

1、以某元素相对于其父元素或兄弟元素的位置来获取无素的 结构伪类。

      E:first-child 第一个子元素
      E:last-child 最后一个子元素 }
      n 遵循线性变化，其取值 0、1、2、3、4、... 但是当 n<=0 时，选取无效。选中所有的奇数的li
 	  li:nth-child(2n-1){ color: red;} 选中所有的 7 的倍数的li
      li:nth-child(7n){ color: red;} 选中前面五个
      li:nth-child(-1n+5){ color: red;}选中后面五个
      li:nth-last-child(-1n+5){ color: red;} 所有的偶数
      li:nth-child(even){ color:red} 所有的奇数
      li:nth-child(odd){ color:blue;}
      n 可是多种形式：nth-child(2n)、nth-child(2n+1)、 nth-child(-1n+5)等；
      E:empty 选中没有任何子节点的E 元素；（使用不是非 常广泛） 没有任何的子元素，包括空格. 

2.目标伪类

   E:target 结合锚点进行使用，处于当前锚点的元素会被 选中； 
	 <li><a href="#title1">CSS (层叠样式表)</a></li>
	 <h2 id="title1">CSS (层叠样式表)</h2>
	  h2:target{color:red;} 
   图片切换  伪元素选择器 
   重点：E::before、E::after 是一个行内元素，需要转换成块元素
        E:after、E:before 在旧版本里是伪类，在新版本里是 伪元素，新版本下
        E:after、E:before 会被自动识别为
        E::after、 E::before，按伪元素来对待，这样做的目的是用来做兼容处 理。
        E:after、E:before 后面的练习中会反复用到，目前只 需要有个大致了解
        E::first-letter 文本的第一个字母或字（如中文、日 文、韩文等）；

3.关于透明度

     background-color: hsla(0,23%,36%,1);
	
		 注：    H 色调 取值范围 0~360，0/360 表示红色、120 表示绿色、 240 表示蓝色 
			     S 饱和度 取值范围 0%~100%
			     L 亮度 取值范围 0%~100%
			     A 透明度 取值范围 0~1
		 
		 1:opacity 设置透明度，只能针对整个盒子设置透明度.
		 2:子盒子会继承父盒子的透明度. .out{ width: 200px; height: 200px; background: green; border: 1px solid darkgreen; margin: 40px auto; opacity: 0.3; } 
		   子盒子也出现透明 .out .inner{ width: 100px; height: 100px; background-color: yellow; }
		 3:background-color: transparent; 完全透明，不可调节透 明度. 4:使用rgba 来控制颜色，相对opacity ，不具有继承性.
	
	 文本 (shadow 阴影) text-shadow，可分别设置偏移量、模糊度、颜色（可设透明 度）。
	  
	    ul>li:nth-child(3){ text-shadow: 5px 5px 2px #ccc, -5px -5px 2px #ccc; 
		注：  1、水平偏移量 正值向右 负值向左；
	          2、垂直偏移量 正值向下 负值向上； 
	          3、模糊度是不能为负值； 
	          代码演示： /* 3px 水平偏移量. 正值向右 负值向左*/ /* 5px 水垂直偏移量. 正值向下 负值向上*/
	           /* 5px 模糊度 模糊度不能为负值 值越大越模糊*/ /* #ccc 设置对象阴影的颜色. 可以有多个影子.