Copyright © 2000-2016 www.knowsky.com All rights reserved | 沪ICP备05001343号
CSS3 选择器记css3 选择器根据所获取页面中元素的不同，把css3选择器分为五大类：
基本选择器层次选择器伪类选择器
动态伪类选择器目标伪类选择器语言伪类选择器UI元素状态伪类选择器结构伪类选择器否定伪类选择器伪元素属性选择器
基本选择器基本选择器是CSS中使用最频繁，最基础，也是CSS中最早定义的选择器。通过基本选择器可以确定HTML树形结构中大多素DOM元素节点。
通配选择器通配选择器(*)用来选择所有元素，当然也可以选择某个元素下的所有元素。
*{margin:0;padding:0;}
表示所有元素的内外边距都为0。
元素选择器元素选择器(E)是CSS选择器中最常见，最基本的选择器。文档的元素包括html，body，p，div等。
div{background：blue；}
表示所有div元素背景色是蓝色。
ID选择器在使用ID选择器之前，需要在HTML文档中给对应的元素设置id属性并设置值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不能同时出现id相同的属性值。在CSS样式中使用id选择器时，需要在id属性值的前面加上“#”号，如(#id)。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> #yxz{ width:100px; height:100px; background:red; }</style></head><body><div id="yxz">我有id</div><div>呵呵</div></body></html>
表示具有id属性值为“yxz”的元素宽高为100px，红色背景。
类选择器类选择器(.class)是以独立于文档元素的方式来指定元素样式。使用方法与ID选择器类似，首先在HTML给需要的元素定义class属性，并为其设置属性值。但与ID选择器不同的是，类选择器在一个页面中可以有多个相同的类名，而ID选择器的ID名在整个页面中只能有一个在CSS样式中使用类选择器时，需要在属性值的前面加上点号(.)，如(.class)。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> .yxz{ width:100px; height:100px; background:red; }</style></head><body><div class="yxz">我有类名</div><div>呵呵</div></body></html>
表示具有class属性值为“yxz”的元素宽高为100px，红色背景。
类选择器还有一种使用方法，就是多类选择器。通过两个或两个以上类选择器合并，来定义有别于一个类名的元素效果。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> .yxz{ width:100px; height:100px; background:red; } .yxz.sx{ border:1px solid black; }</style></head><body><div class="yxz sx">我有两个类名</div><div class="yxz">呵呵</div></body></html>
具有类名“yxz”的两个div宽高背景都一样，但是第一个div还有另一个类名“sx”，通过这个类名为第一个div增加了边框属性。这样我们就可以为多个属性设置一般样式与特殊样式了。
由于类名在一个HTML文档中可以同时存在于不同的元素标签上。换句话说，在一个HTML文档中，div可以有类名“yxz”，ul也可以有类名“yxz”，但有时候我们只需要在div上设置样式，就可以使用带有标签的类名选择器。
div.yxz{/*样式*/}
这样就可以只匹配类名为“yxz”的div元素了。
群组选择器群组选择器(selector1,selectorN)是将具有相同样式的元素分组在一起，每个选择器之间用逗号(,)隔开。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> h1,h2{ background:black; color:white; width:200px; float:left; margin-right:20px; }</style></head><body><h1>胸无大志者，必受制于人</h1><h2>丈夫生不五鼎食，死则五鼎烹耳</h2></body></html>
表示h1,h2具有相同的样式。
层次选择器层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便地选定需要的元素。
后代选择器后代选择器(E F)也称为包含选择器，中间以空格隔开，作用就是可以选择某元素的后代元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div span{ background:black; color:white; float:left; margin-right:20px; }</style></head><body><div> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span></div> </body></html>
匹配div的后代元素span。
子选择器子选择器(E>F)只能选择某元素的子元素，中间用大于号(>)隔开。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div span{ background:black; color:white; float:left; margin-right:20px; }</style></head><body><div> <span>胸无大志者，必受制于人<span>丈夫生不五鼎食，死则五鼎烹耳</span></span></div> </body></html>
只能选择div下的子元素span，span的子元素span是div的后代元素，不能匹配。
相邻兄弟选择器相邻兄弟选择器(E+F)可以选择紧接在另一个元素后的元素，它们具有一个相同的父元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> span+span{ background:black; color:white; }</style></head><body><div> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span></div> </body></html>
匹配span后面且相邻的兄弟元素span。因为第三个span相邻第二个span，第四个span相邻第三个span，所以也能够匹配。
通用兄弟选择器通用兄弟选择器(E~F)是CSS3新增加的，用于选择某元素后面的所有兄弟元素，它们也具有相同的父元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> span~span{ background:black; color:white; }</style></head><body><div> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span></div> </body></html>
选择第一个span元素后面的所有兄弟元素span。
伪类选择器css3中的伪类选择器可以分成6种：动态伪类选择器，目标伪类选择器，语言伪类选择器，UI状态伪类选择器，结构伪类选择器和否定伪类选择器。伪类选择器语法书写时和其他的CSS选择器写法有所区别，都以冒号(:)开头。
动态伪类选择器动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种是用户行为伪类。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> a:link{ color:red; text-decoration:none; } a:visited{ color:yellow; } a:hover,a:focus{ color:blue; text-decoration:underline; } a:active{ color:black; }</style></head><body><a href="#">胸无大志者，必受制于人</a> </body></html>
未访问时为红色且取消下划线，访问后为黄色，用户停留在链接，或链接获得焦点时显示下划线并设置蓝色，点击链接时为黑色。设置动态伪类选择器时，必须遵循一定的循序。因为这几个选择器具有相同的特殊性，所以根据在文档中的顺序来决定更特殊的选择器。那么选择器的循序就至关重要了，正常的循序应该是:link，:visited，:hover，:active。
目标伪类选择器目标伪类选择器“:target”用来匹配文档链接中的URI中某个标识符的目标元素。URI中的标识符通常会包含一个井号(#)，后面带有一个标志符名称，例如“#yxz”，“:target”就是用来匹配ID为“yxz”的元素。":target"伪类选择器选取链接的目标元素，然后定义样式。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> p{ font-size:16px; line-height:20px; width:0; height:20px; overflow:hidden; -moz-transition:width 2s ease-in-out; -webkit-transition:width 2s ease-in-out; transition:width 2s ease-in-out; position:absolute; visibility:hidden; }/*假如目标被选中，后面的P元素如此如此*/ div:target p{ width:220px; visibility:visible; }</style></