层叠样式表（CSS）2（环境：MyEclipse 10）

二、选择器

注：在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、伪元素选择器

选择器	例子	例子
:active	a:active	匹配被点击的链接
:checked	input:checked	匹配处于选中状态的 < input > 元素
:disabled	input:disabled	匹配每个被禁用的 < input > 元素
:empty	p:empty	匹配任何没有子元素的 元素
:enabled	input:enabled	匹配每个已启用的 < input > 元素
:first-child	p:first-child	匹配父元素中的第一个子元素 < p >，< p > 必须是父元素中的第一个子元素
:first-of-type	p:first-of-type	匹配父元素中的第一个 < p > 元素
:focus	input:focus	匹配获得焦点的 < input> 元素
:hover	a:hover	匹配鼠标悬停其上的元素
:in-range	input:in-range	匹配具有指定取值范围的 < input> 元素
:invalid	input:invalid	匹配所有具有无效值的 < input> 元素
:lang(language)	p:lang(it)	匹配每个 lang 属性值以 "it" 开头的 < p> 元素
:last-child	p:last-child	匹配父元素中的最后一个子元素 < p>， < p> 必须是父元素中的最后一个子元素
:last-of-type	p:last-of-type	匹配父元素中的最后一个 < p> 元素
:link	a:link	匹配所有未被访问的链接
:not(selector)	:not(p)	匹配每个非 < p> 元素的元素
:nth-child(n)	p:nth-child(2)	匹配父元素中的第二个子元素 < p>
:nth-last-child(n)	p:nth-last-child(2)	匹配父元素的倒数第二个子元素 < p>
:nth-last-of-type(n)	p:nth-last-of-type(2)	匹配父元素的倒数第二个子元素 < p>
:nth-of-type(n)	p:nth-of-type(2)	匹配父元素的第二个子元素 < p>
:only-of-type	p:only-of-type	匹配父元素中唯一的 < p> 元素
:only-child	p:only-child	匹配父元素中唯一的子元素 < p>
:optional	input:optional	匹配不带 "required" 属性的 < input> 元素
:out-of-range	input:out-of-range	匹配值在指定范围之外的 < input> 元素
:read-only	input:read-only	匹配指定了 "readonly" 属性的 < input> 元素
:read-write	input:read-write	匹配不带 "readonly" 属性的 < input> 元素
:required	input:required	匹配指定了 "required" 属性的 < input> 元素
:root	root	匹配元素的根元素，在 HTML 中，根元素永远是 HTML
:target	#news:target	匹配当前活动的 #news 元素（单击包含该锚名称的 URL）
:valid	input:valid	匹配所有具有有效值的 < input> 元素
:visited	a:visited	匹配所有已经访问过的链接

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

      举个栗子：
        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：红色

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