二、选择器

注：在head里面写选择器的内容。环境一直不变，所有HTML和css都是这个MyEclipse 10

1.基本选择器（每个选择器新建一个HTML网页测试学习）

      元素选择器：按节点名称匹配元素（例子里面的节点名：span）
          语法：html的标签名{css的属性；}
            选择器：
              <style type="text/css">
		  span{color:yellow;font-size:70px; }
	      </style>
	    body页面内容：
                  <span>元素选择器</span>
      效果：元素选择器：黄色+70像素大小
			
       id选择器：利用id的唯一性匹配所有元素（id：d1/d2）
	  语法：#id值{css的属性；}
	    选择器：
                  <style type="text/css">
			#d1{background-color: yellow;}
			#d2{background-color: green;}
		    </style>
            body：
		<div id="d1">id1</div>
		<div id="d2">id2</div>
    效果：id1：黄色 id2：绿色
			
        class选择器：类选择器，按class属性的值，匹配所有元素
		语法：.class值{css的属性；}
		选择器：
                          <style type="text/css">
				.s1{background-color: black}
				.s2{background-color: yellow}
			</style>
                body：
			<div class="s1">d111</div>
			<div class="s2">d222</div>
			<div class="s2">d333</div>
  效果：d111：黑色  d222和d333：黄色

选择器优先级：
id选择器>类选择器>元素选择器

2.属性选择器

	语法：基本选择器[属性=“属性值”]{css的属性;}
            例如      input[type="text"]{background-color: yellow;}
	选择器：
                <style type="text/css">
		    input[type="text"]{background-color: yellow}
		    input[type="password"]{background-color: blue}
		</style>
          body：
		<form action="">
		      Username:<input type="text" /><br/>
		      Password:<input type="password" /><br/>
		</form>
      效果：用户输入框：黄色  密码输入框：蓝色

3、伪元素选择器

上表源于网络，出处忘了，若侵权联系我删，谢谢！

      举个栗子：
        a标签的伪元素选择器
		语法：
                      状态：静止       悬浮      触发        完成
                            link      hover     active      visited
                      例：a：状态{css的属性}
		选择器：
                            <style type="text/css">
				a:link{color:red }
				a:hover{color:blue}
				a:active{color:black}
				a:visited{color:yellow}
			      </style>
                    body:
			<a href="#">just dance!!!</a>
	效果：	just dance!!! ：    
                                  鼠标不放上面不点击：红  鼠标放上面：蓝  点击时：黑  松开：黄		

4、层级选择器

	语法：以下称呼皆为了理解（正常：父级，子级......）
              #第一级      .第二级       （第三级）选择器{css的属性；}
              #fruit1     .banana1               span{color:red}
	选择器：
		<style type="text/css">
	                #fruit1 .banana1 span{color:red}
                </style>

    
    body：
                    <div id="fruit1">
			<div class="banana1">
				<span>span1</span>
			</div>
			<div class="apple1">
				<span>span2</span>
			</div>
		    </div>
		    <div id="fruit2">
			<div class="banana1">
				<span>span3</span>
			</div>
			<div class="apple1">
				<span>span4</span>
			</div>
	            </div>
  效果：span1：红色

注：未经同意请勿转载，仅作学习使用。以上有描述不正确之处，望大家能不吝指出，共同学习共同进步。谢谢