选择器是CSS的核心，从最初的元素、class/id选择器，进化到伪元素、伪类，CSS3中提供了更丰富的选择器，定位页面上的任意元素变得越来越容易和更轻松。1.元素选择器这是最基本的CSS选择器。HTML文档中的元素本身就是一个选择器：p{line-height:1.5em;margin-bottom:1em;}2.关系选择器EF:descendantselection以元素E的后代中的所有元素F为目标的选择器：ulli{margin-bottom:0.5em;}E>F：以所有元素F为目标的子选择器在元素E的直接子元素中，它会忽略任何进一步的嵌套：ul>li{list-style:none;}//只有ul的直接子元素li，如果li里面嵌套了另一个ul结构，最里面的li会beIgnoreE+F：相邻兄弟选择器，其目标元素F与元素E具有相同的父元素，并且在标记中紧邻E：li+li{border-top:1pxsolid#ddd;}//定位元素F在同一父元素ul中具有所有liE~F，除了第一个li：通用兄弟选择器，它针对与元素E具有相同父元素且在标记中位于E之后的所有元素F：h1~p{color:#f00;}//定位h1标签之后所有p标签具有相同的父元素3.属性选择器E[attr]：该选择器定位任何具有a的元素Ettributeattr:input[required]{border:1pxsolid#f00;}//定位页面中所有具有required属性为“required”的inputE[attr=val]：该选择器定位任意一个具有属性attr和属性值为val的元素E:input[type=password]{border:1pxsolid#aaa;}//在页面中定位密码输入框E[attr|=avl]:该选择器定位任意一个属性为attr且属性值为val的元素Eorstartswithval-:p[class|=a]{color:#333;}//定位页面中所有P段都有class属性，属性值以a或a-开头，如class="a"andclass="a-b"E[attr~=val]:该选择器定位任何具有属性attr且属性值为完整词val的元素E:div[title~=english]{color:#f88;}//定位页面中所有具有title属性的元素，并且有一个div容器，属性值中有完整的单词english，如title="english"andtitle="aenglish"E[attr^=val]：此选择器针对具有属性attr且属性值以val开头的任何元素E：div[class^=a]{color:#666;}//定位页面中有属性class且属性值以a开头的div容器，比如class="a"andclass="ab"E[attr$=val]:这个选择器正好相反E[attr^=val],定位任意一个属性为attr且属性值以val结尾的元素E:div[class$=a]{color:#f00;}//定位页面中有attributeclass，属性值以a结尾，如class="nba"andclass="cba"E[attr*=val]：这个选择器类似于E[attr~=val]，但是更进一步并定位到具有属性attr且属性值中任意位置包含val的元素E，val可以是一个完整的单词，也可以是单词的一部分：a[title*=link]{text-decoration:underline;}//定位allalinkswithlinkstringsinthetitle4.伪类：link:unvisitedl墨水;:visited：访问过的链接，不推荐；:hover:鼠标移动到容器，不限于链接，可用于页面中的任何元素；:active:激活时的状态，不限于Link，可用于任何具有tabindex属性的元素；:focus:获得焦点时的状态，不限于链接，可用于任何带tabindex属性的无线元素：input:focus{border:1pxsolid#333;}//输入框获得焦点时的样式：enabled:启用界面元素:input:enabled{border:1pxsolid#899;}:disabled:禁用界面元素:input:disabled{background:#eee;}:target:选择器targets锚点中的目标元素currentactivepage:"#info:target{font-size:12px;}"//当访问的URL是123.html#info,id="info"会加载这个字体样式:default:适用于一个或多个UI作为一组相似元素中的默认元素的元素；:valid:适用于有效元素：input:valid{border:1pxsolid#6a6;}//根据type或pattern属性，当输入框被验证为有效时加载此边框样式：invalid：适用于空的必需元素，不符合type或pattern属性定义的要求的元素：input:invalid{border:1pxsolid#f00;}//当输入框为空且必填，或填满但验证无效时，加载此边框样式：in-range:应用于那些withrangerestrictions值在限制范围内的元素；例如具有min和max属性的数字和范围输入框；:out-of-range:与:in-range选项相反，值超出范围；:required:applys适用于具有required属性的表单控件；:ooptional：适用于所有没有required属性的表单控件：只读：适用于其内容不能被用户修改的元素；:read-write:适用于其内容可以被用户修改的元素，比如输入框；:root:根元素，总是指html元素；EF:nth-child(n):这个选择器定位元素E的第n个子元素的元素F:div.classp:nth-child(3){color:#f00;}//class="class"是div容器中的第三个元素p，如果第三个子元素不是p，则该样式无效EF:nth-last-child(n)：该选择器定位元素E的倒数第n个子元素的元素F；E:nth-of-type(n)：该选择器定位指定类型元素E的第n个子元素；E:nth-lash-of-type(n)：该选择器定位元素E的派生指定类型的第n个子元素：.classp:nth-child(2)和.classp:nth-of-type(2)不同的是，如果.class中的第二个子元素不是P元素，.classp:nth-child(2)的样式会失效，而.classp:nth-of-type(2)将位于.class中的第二个p元素nth-child(n),nth-last-child(n),nth-of-type(n),nth-last-of-type(n),其中n可以使用数字Static，比如.nth-child(2n+1)会匹配第1,3,5...元素E:first-child：父元素的第一个子元素E，同:nth-child(1)；E:last-child：父元素的倒数第二个子元素E；E:first-of-type:与:nth-of-type(1)相同；E:last-of-type:与:nth-last-of-type(1)相同；E:only-child：父元素中唯一的子元素E；E:only-of-type：父元素中唯一该类型的元素E；E:empty：没有子元素的元素，没有子元素包括文本节点；E:lang(en):有一种由两个字母缩写(en)表示的语言E:not(exception):这个选择器将选择与括号中的选择器不匹配的元素：p:not(.info){font-size:12px;}//匹配所有不是info的class值p元素5.伪元素伪元素可以用来定位文档中包含的文本。为了和伪类区别，伪元素用双冒号::定义，但是单冒号:也可以识别::第一行：匹配文本第一行；::first-letter：匹配文本的第一个字母；::before和::after：使用contnet属性生成附加内容并将其插入标记中：a[href^=http]::after{content:"link"}//Inserttextbehindthealinkonthe页面链接::选择：匹配突出显示的文本::选择{背景：#444;color:#fff;}//定义选中的文本颜色和背景颜色当然，如果你想方便地使用这些强大的CSS选择器，使用Chrome和Firefox等浏览器，或者至少放弃IE9以下的IE浏览器。
