选择器_html/css_WEB-ITnose

    a:hover{color:red;}    a:link{color:green;}

　　:focus捕捉当获得焦点时的响应，如文本框变背景色。

　　匹配目标，:target，如果一个url中带有#aaa，恰好html中有带有id为aaa的标签，则匹配的是它，它用在页面内的锚点，如下，点击跳到页面内跳到锚点处可以发现它的样式已经改了（不知道br够不够）

    div :target{background-color:red;}    <p><a href="#goto">跳到页面内goto</a></p>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <br/><br/><br/><br/><br/><br/><br/>    <div>        <p name="goto" id="goto">锚点goto</p>    </div>

　 捕捉根节点，:root，html页面就是html节点了。

　　捕捉特殊子节点的，:first-child、:last-child、:first-of-type、:last-of-type等。字面义可看出是第一个子节点，或第一个子类型。值得注意的是p:first-child与p :first-child完全不同（后者两个之间有空格），前一个很容易以为，它是指p标签的第一个子节点，但实际上第二个才是这样的正确写法，而p:first-child指的是，p作为其他标签的第一个子标签，它匹配的应该是这样的

    <div>        <p>匹配了这里</p>        <span><p>也匹配了这里</p></span>    </div>

　　同理，p:first-of-type，指的是，作为其他元素的子元素，匹配的第一个出现的标签为p的元素，即首先，p是其他元素的子元素，第二，匹配的是子元素中第一个出现的p标签，前面有其他的类型子标签不要紧，只要不是p就行，即使它后边还有相同的p兄弟标签，因为不是第一个出现的，也不符合。

　　这种有点麻烦的情况，就要问问，它是它的子元素吗？它是它下面第一个出现的x标签吗？符合就是对的，如

    <div>        <h1>标题</h1>    <span>           <p>我是span的子标签中第一个出现的p</p>    </span>    <p>我是div的子标签中第一个出现的p</p>    </div>    

　　而 p :first-of-type（有空格），是指p标签下的第一个子元素，因为没指定类型，所以只要是p标签下边的第一个子类型，就会匹配到，等同于p :first-child，如果是p span:first-of-type，就是指p标签下，第一个类型为span的子标签。

　　匹配只有一个子元素的，:only-child，如p:only-child（没有空格），匹配以p作为子元素，且它的父元素只有它这一个子元素的情况。

　　按一定规律的匹配子元素，以:nth-child为例，从字面意义可知是第n个子元素，形式非常灵活。比如现在有一个无序列表栏目，以它为例

    <ul class="nav">         <li>A</li>         <li>B</li>         <li>C</li>         <li>D</li>         <li>E</li>    </ul>

第一种，直接给一个数值，.nav li:nth-child(2)表示：li是类名为nav的子标签，且匹配第2个这样的标签，这里li都是ul的子标签，匹配其中第二个就是B了。

第二种，匹配奇偶项，如.nav li:nth-child(odd)，表示匹配列表中奇数项列表，括号里的odd是个参数，表示寻找奇数列（单词也表此意），A是第1列（从1开始计数），C是第3列，包括第5列E都符合，同理有偶数匹配，.nav li:nth-child(even)。

　　第三种，使用表达式，比如.nav li:nth-child(2n+3)，css不仅自己知道第一条列表的n值是1，第二条是2，而且在计算2n+3是几的时候，从0开始取自然数，所以2n+3就是对应着第3条、第5条、第7条...这种带n的表达式更加灵活。

　　ok，类似于:nth-child，还有:nth-of-type(n)、:nth-last-child(n)（倒数第几个）、:nth-last-of-type(n)（倒数第几个类型）等等就很好理解了。

　　伪类中还有匹配某种状态的，如下，比如哪些文本框不可用（设置了disable属性），单选框是否被选中等

    .txt:checked    .txt:enabled    .txt:disabled

　　11.伪元素

　　匹配某个元素的特殊位置，起了个名字叫伪元素。如下，如字面义，:before匹配p标签文本内容的开始地方，:after匹配其结束的地方，content的内容规定在文本开始加上Start，结束时加上End~。first-letter匹配首字母，first-line匹配首行。

    p:before{content:'Start";}    p:after{content:"End~"}    p:first-letter{color:red;}    p:first-line{color:green;}

　　12.属性元素

　　属性元素非常常用，特别在js中，怎么能少的了。属性选择器当然跟标签带有的属性相关，就是根据这些标签带有的某些属性来做的匹配

     a[target]{color:green;}     <a href="http://www.css.org/">to css</a>     <a href="www.example.com" target="_blank">to example</a>

　　第二种，A[attr=value]，匹配带有attr属性且属性值为value的元素，那么上例的匹配可以这样写，a[target=_blank]{...}，将_blank加引号也可。

　　第三种，A[attr~=letter]，匹配带有attr标签，且标签的属性值中带有letter单词的A元素，如

    p[class~=news]{color:red;}    <p class="wrap news"></p>

　　第四种，A[attr|=value]，匹配带有attr属性，且属性值以value开头或者value-开头，最适合的就是规定元素语言属性的时候，在html页面中可告知浏览器，这里用什么语言，有个lang属性，如下，匹配的是第一个。

    p[lang|=en]{color:red;}    <p lang="en-us">I am CSS</p>    <p lang="zh-cn">层叠样式表</p>

　　第五种，使用通配符*，A[attr*=value]，只要A标签带有attr属性，且属性值中包含字符串value即匹配

　　最后两种，检测属性值的开头和结尾，分别是A[attr^=value]：匹配带attr属性，且属性值以value开头的A元素，如检查链接a[href^=http]，而A[attr$=value]则匹配以value结尾的attr属性值的A，如某些下载链接检测a[href$='.zip']。

　　最后属性选择器完全可以混用，比如在某个表单中，用jQuery选中元素对象时

    <div>    <input type="radio" name="type" value="big" />big<br/>    <input type="radio" name="type" value="medium" checked />medium<br/>    <input type="radio" name="type" value="small"  />small<br/>    </div>    <!--需要引入jQuery文件-->    <script type="text/javascript">         alert($("[type=radio][name=type][checked]").val());    </script>

　　其中[type=radio][name=type][checked]，就是对多个属性的同时使用，本例想打印type属性为radio、name属性为type、有checked属性（被选中）的元素的value值，需要引入jQuery文件。这个好像不用写得这么麻烦，突然忘了

　　这些有的属于css2，有的是css3，而且不一定各个浏览器通用，偶只是知道有这么回事，没去分个类，原谅我白痴=_=