关于css中常用几种选择器的整理

css通过使用选择器修改页面样式

                    【选择器的写法】
		 选择器中，可以写多组样式属性，使用{}进行包裹；
		  多组样式之间，使用分号分隔； 样式属性与属性值之间，用冒号隔开。
		  
		  选择器{
			  属性1:属性值1;
		 	  属性2:属性值2;
		 }

		
		
		【CSS中常用选择器】
		
		① 标签选择器
		  写法： HTML标签名{}
		 作用：选中页面中所有与选择器同名的HTML标签。
		
		li{
			/*color: red;*/
		}
		
		②类选择器（class选择器）
		 * 写法：  .class名{}
		 * 调用： 在需要应用这套样式的标签上，使用class="class名"调用选择器。
		 * 优先级：  class选择器>标签选择器
		 */
		.ji{
			/*color: blue;*/
		}
		
		
		
		
		③ID选择器：
		 * 写法：  #ID名{}
		 * 调用：  在需要应用这套样式的标签上，使用id="ID名"调用选择器。
		 * 优先级： ID选择器>class选择器
		 */
		#two{
			/*color: yellow;*/
		}
		
		/* 【class选择器和ID选择的区别】
		 * 1. 写法不同：class选择器用.声明，ID选择器用#声明；
		 * 2. 优先级不同：ID选择器>class选择器
		 * 3. 调用次数不同： class选择器可以调用多次； ID选择器只能调用一次(同一页面，不能出现同名ID)。
		 */
		
		
		④通用选择器
		 * 写法：  *{}
		 * 作用： 作用于页面中所有的HTML标签；
		 * 优先级：  最低！低于标签选择器。
		 */
		*{
			/*background-color: yellow;*/
			/*color: pink;*/
		}
		
		
		
		⑤并集选择器
		 * 写法： 选择器1,选择器2,……选择器n{}  多个选择器之间逗号分隔。
		 * 生效规则： 多个选择器取并集，只要标签满足其中任何一个选择器，样式即可生效
		 * 
		 * (其实相当于多个选择器拆开写)
		 */
		li,.ji{
			/*color: red;*/
		}
		
		
		⑥ 交集选择器
		 * 写法： 选择器1选择器2……选择器n{}  多个选择器之间紧挨着，没有分隔
		 * 生效规则： 多个选择器取交集，必须满足所有选择器的要求，样式才能生效。
		 */
		li.ji{
			/*color: red;*/
		}
		
		
		⑦ 后代选择器
		 * 写法： 选择器1 选择器2 …… 选择器n{}
		 * 生效规则： 只要满足后一个选择器是前一个选择器的后代，样式即可生效（后代包括子代、孙代。。。）
		 */
		div .ji{
			/*color: red;*/
		}
		
		
		⑧ 子代选择器
		 * 写法： 选择器1>选择器2>……>选择器n{}
		 * 生效规则： 必须满足后一个选择器是前一个选择器的直接子代，样式才能生效。（两个选择之间不能有任何其他标签）
		 */
		div>ul>.ji{
			color: red;
		}


             》》》》》》》》注意：选择器的【命名规范】

		 1. 只能有字母、数字、下划线、减号组成；
		 2. 开头不能是数字。而且，选择器名不能只有一个减号。
	   	 3. 一般选择器必须要有语义，使用单词和数字组成。 多个单词之间可以用减号或下划线链接。




                     【特殊选择器：伪类选择器】
		  1、 写法： 伪类选择器，在选择器的后面，用:分隔，并紧接伪类状态；
		     eg:  a:hover{}
		  
		  2、超链接的伪类状态：
		    :link - 未访问状态           :visited - 已访问状态
		    :hover - 鼠标指上状态     :active - 激活选定状态(鼠标点下未松开)
		 
		   》》》》》》 注意： 当超链接多种伪类状态共存时，必须按照link-visited-hover-active 的顺序排列，否则会导致某些状态不能生效。
		 
		 3、 input的常用伪类状态：
		    :hover   :focus - 获得焦点的状态      :active
		   》》》》》》 注意： 当input多种状态共存时，必须按照上述顺序
		 
		 4、 其他标签，基本只有:hover事件
		
		
		.a:link{
			color: yellow;
		}
		
		.a:visited{
			color: red;
		}
		
		.a:hover{
			color: blue;
		}
		
		.a:active{
			color: green;
		}
		
		
		input:hover{
			color: red;
		}
		
		input:focus{
			color: blue;
		}
		
		input:active{
			color: yellow;
		}