web常用选择器的介绍以及选择器的优先级（小白版）

在web编程的时候我们需要的必不可少的功能是选择器，选择器又分为多种，在这里选择常用的进行详细介绍(这里也是我最近的学习内容)

<div class="123" id="456">
	<span>你好</span>
	<p><span>你好</span></p>
</div>
<span>你好</sapn>

1. 后代元素选择器
   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选择器
标签{}//元素选择器

2. 子元素选择器（IE6及以下版本不适用）

• 作用：选择指定父类元素的指定子元素
• 语法：父类元素 > 子类元素{}

<style type="text/css">
div > span{}//对div的子类的span进行设置，至于p标签下的span这个孙子辈的元素不进行修改
</style>

3. 伪类选择器

• 作用：专门用来表示子元素的一种特殊的状态
• 语法：标签或类 ：特殊状态{}

如下：（以a便签为例）

• a：link{} 普通链接（未访问的）
• a：visited{} 访问过的链接，特别注意：由于涉及用户隐私，visited只能设置字体颜色
• a：hover{} 鼠标在元素上的状态（鼠标放在超链接上）
• a：active{} 超链接被点击时的状态

注意

• ：active和：hover可对对多种元素（标签或类）尽心操作
• IE6不支持对a标签以外的标签使用：hover和：active
• 其他伪类
  ：focus 获取焦点
  ：：selection 选中的元素（这里是两个：：是对的）
• 在火狐中用发如 ::-moz-selection

补充：< input type=“text” >//代码为创建输入文本框

4. 伪元素选择器（针对对元素中的一些特殊位置)
   这里以p便签为例

• p : first-letter{}//对第一个位置 ，是指一段内容的额第一个字的位置
• p : first-line{}//对第一行的位置
• p : before{}//表示元素最前面的元素
  一般：before都和content一起使用
  p：before{contert：“内容”；}//将内容加到P标签前，且这部分内容不可被鼠标选中
• p：after{} 元素最后的位置（位置如上）

5. 属性选择器

• title属性，可为任何标签使用

<p title="内容">元素</p>
当鼠标移入到元素上时，title中的内容将显示

• 属性选择器的作用
  可以根据元素中的属性或属性值来选取指令元素
  语法：p[title]{}//对p便签设置title

• 属性选择器的语法
  1.[属性名]{} //选取含有指定属性的元素
  2 [属性名=属性值]{} //选取含有指定属性值的元素
  3 [属性名 ^ = 属性值的部分]{} //选取属性值以指定内容开头
  4 [属性名 $=属性值部分]{} //选取属性值指定内容结尾
  5 [属性名 * =属性值部分]{} //选取属性值包含的部分连续内容

6. 子元素的伪类选择器
   • ：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是对所有的子元素

7. 兄弟选择器

• span+p{}//二者之间必须是相邻的
  作用：可以选中一个元素后紧挨着的指定的兄弟元素
  语法：前一个 +后一个{}
• span ~ p{} //可以不是紧挨着的
  语法：前一个~后边所有{}

8. 否定伪类
   p{} //为所有的p设置
   作用：从选中的元素中去除某些元素

   p：not（）{} //对p设置去除括号内的类或者ID

9. 选择器的优先级

   • 1000 内联样式 优先级太高不推荐使用
   • 100 ID
   • 10 类和伪类
   • 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> //称为内联样式

10. 伪类的顺序（尽量采用此顺序，原因在这里暂时不进行详细的讲解啦）

• ：link
• ：visisted
• ：hover
• ：active