在web编程的时候我们需要的必不可少的功能是选择器，选择器又分为多种，在这里选择常用的进行详细介绍(这里也是我最近的学习内容)
<div class="123" id="456"> <span>你好</span> <p><span>你好</span></p> </div> <span>你好</sapn> 后代元素选择器 1）作用：选择指定元素的指定后代元素 2）语法：祖先元素 后代元素{} //注意祖先元素和后代元素之间使用空格 使用一： <style type="text/css"> div span{}//表示div中的span中的内容全部执行操作，无论是子类还是孙子一辈的 #456 span{}//ID选择器加后代选择器 对id为456的div的后代为span的元素进行设置（class也同理） div p span{}//对div下的p标签中的span进行设置 </style> 补充 #ID值{}//为ID选择器 .CLASS值{}//为calss选择器 标签{}//元素选择器 子元素选择器（IE6及以下版本不适用） 作用：选择指定父类元素的指定子元素语法：父类元素 > 子类元素{} <style type="text/css"> div > span{}//对div的子类的span进行设置，至于p标签下的span这个孙子辈的元素不进行修改 </style> 伪类选择器 作用：专门用来表示子元素的一种特殊的状态语法：标签或类 ：特殊状态{}如下：（以a便签为例）
a：link{} 普通链接（未访问的）a：visited{} 访问过的链接，特别注意：由于涉及用户隐私，visited只能设置字体颜色a：hover{} 鼠标在元素上的状态（鼠标放在超链接上）a：active{} 超链接被点击时的状态注意
：active和：hover可对对多种元素（标签或类）尽心操作IE6不支持对a标签以外的标签使用：hover和：active其他伪类 ：focus 获取焦点 ：：selection 选中的元素（这里是两个：：是对的）在火狐中用发如 ::-moz-selection补充：< input type=“text” >//代码为创建输入文本框
伪元素选择器（针对对元素中的一些特殊位置) 这里以p便签为例 p : first-letter{}//对第一个位置 ，是指一段内容的额第一个字的位置p : first-line{}//对第一行的位置p : before{}//表示元素最前面的元素 一般：before都和content一起使用 p：before{contert：“内容”；}//将内容加到P标签前，且这部分内容不可被鼠标选中p：after{} 元素最后的位置（位置如上） 属性选择器 title属性，可为任何标签使用 <p title="内容">元素</p> 当鼠标移入到元素上时，title中的内容将显示属性选择器的作用 可以根据元素中的属性或属性值来选取指令元素 语法：p[title]{}//对p便签设置title
属性选择器的语法 1.[属性名]{} //选取含有指定属性的元素 2 [属性名=属性值]{} //选取含有指定属性值的元素 3 [属性名 ^ = 属性值的部分]{} //选取属性值以指定内容开头 4 [属性名 $=属性值部分]{} //选取属性值指定内容结尾 5 [属性名 * =属性值部分]{} //选取属性值包含的部分连续内容
子元素的伪类选择器 ：first-child 可以选中第一个子元素 <p>..........</p> <p>..........</p> <p>..........</p> <p>..........</p> <style type="text/css"> p:first-child{}//对p第一行的p进行设置（只限于对同一辈的第一行） </style> <!-- 如果如下情况将不会对第一个p进行设置 --> <span>........</span> <p>..........</p> <p>..........</p> <style type="text/css"> p:first-child{} </style> <!-- 一下情况p均会改变 --> <p>........</p> <div> <p>.......</p> </div> <style type="text/css"> p:first-child{}//两个p均改变 </style> ：last-child{} //可选中最后一个子元素：nth-child{} //可选中任意位的子元素 <style type="text/css"> P:nth-child(这里放p便签需要修改的第几个){}//放为1则为第一个 //选择器都可以指定一个参数，指定要选中的第几个子元素 //当写入的是Even时，所有的偶数p便签改变 //当写入的是odd时，所有的奇数p便签改变 </style> ：first-of-type <style type="text/css"> p:first-of-type{} //对所有p元素的中的第一个进行修改（无论是不是在第一行） </style> ：last-of-type：nth-of-type 注： :first-of-type 是对属于当前标签的同级类子元素 :first-child是对所有的子元素 兄弟选择器 span+p{}//二者之间必须是相邻的 作用：可以选中一个元素后紧挨着的指定的兄弟元素 语法：前一个 +后一个{}span ~ p{} //可以不是紧挨着的 语法：前一个~后边所有{}否定伪类 p{} //为所有的p设置 作用：从选中的元素中去除某些元素
p：not（）{} //对p设置去除括号内的类或者ID
选择器的优先级
1000 内联样式 优先级太高不推荐使用100 ID10 类和伪类1 元素0 通配 即 *{}的无优先级 继承注：
当选择器中包好多种选择器时，需要将多种选择器的优先级相加进行比较如： id元素{} //数值等于101 id{} //数值等于100 所以第一个的优先级大于第二个需要特别注意的时选择器的优先级计算不会超过踏风最大的数量级如果选择器的优先级一样，则使用靠后的样式补充： 并集选择器的游戏那几单独计算（不相加） div > p > #p > .h #p代表ID .h代表类
一个必须知道，但是又不太常用的东西 ！important 在样式的最后和；之间加入此符号，则会将该样式设为最高优先级，甚至会超过内联样式，但是开发中不建议使用
<style type="text/css"> p{ color : green !important;//这是将会达到最高级状态 } </style> <p color="green"></p> //称为内联样式 伪类的顺序（尽量采用此顺序，原因在这里暂时不进行详细的讲解啦） ：link：visisted：hover：active