前端学习——HTML与CSS:选择器

1.常用的选择器

首先说下，div和span ,div是块级元素（div包裹的文本没有默认样式，不会像p，会有间距），span是内联元素。div和span没有语义，块元素通常用来做页面的布局，内联元素用来选中文本设置样式。通常情况只使用块元素去包含内联元素，而不会用内联元素去包含块元素。

1.元素选择器

作用：通过元素选择器可以可以改变页面中该类元素文本的样式。
语法：

p{
color: red;
}
h1{
color: green;
}

2.id选择器

作用：通过元素的id属性值选中唯一的一个元素。
语法：

#p1{
color: red;
font-size:20px;
}

<p id="p1">id选择器</p>

3.class选择器（类选择器）

通过class属性值选中一组元素；
语法：

.p2{
color:red;
}
.hello{
font-size:20px;
}
<p class="p2">111111</p>
<p class="p2">222222</p>
<p class="p2 hello">333333</p>//一个元素可以设置多个类

4.选择器分组

作用：通过选择器分组可以同时选择多个选择器对应的元素。
语法：选择器1，选择器2，选择器n{}

p , .p1 , #p2{
color:red;
}

5.通配选择器

作用：涌来选择页面中的所以元素
语法：

*{
color: red;
}

6.复合选择器（交集选择器）

作用：选中同时满足多个选择器的元素
语法：选择器之间紧挨在一起，不需要空格或逗号

span.p3{
background-color:red;
}

<p class="p3">11111111</p>    //不会变

<span class="p3">22222222</span>    //会变化

7.子元素和后代元素选择器

作用：选中某指定元素的后代元素
语法：祖先元素 后代元素{}。注意空格隔开

div span{
color:red;
}
//下面的111111和2222222都变红
<div>
<span>111111</span>
<p><span>22222222</span></p>
</div>

语法：祖先元素>后代元素{}；（可以一直指下去1>2>3>4>5,但不好）

div>p{
color:red;
}
<div>
<span>111111</span>   //不变红
<p><span>22222222</span></p>   //变红
</div>

2.伪类选择器

伪类选择器专门用来表示元素的一种特殊的状态。比如：访问过的链接和未访问过的链接。
但我们要为一些特殊状态的元素设置样式时，就需要使用伪类选择器。

1.给链接定义样式

:link :
为正常链接设置样式，未访问过的，浏览器通过历史记录来判断是否访问过该链接，一般默认情况下，访问过的是紫色，未访问过的是蓝色。
使用例子：

a:link{
	color:red;
}

:visited :
应用于访问过的链接，（该选择器仅仅能设置链接的颜色），因为要对用户的访问数据进行保护。其他选择器除了能设置颜色外，字体，背景色等等都可以。

a:visited{
	color:blue;
}

:active : 应用于正在点击的链接，即链接正在处于激活状态时，鼠标按住却未松开。()
例子：

a:active{
	color:green;
}

:hover : 鼠标滑过的链接；当鼠标落在链接上时，链接显示出不同的效果。
例子：

a:hover{
	color:skyblue;
}

上面的:active和:hover对其他元素也可以使用，例如p元素（除了ie6不行，其他都可以，ie6里仅能用于链接）

注意：

因为a的四个伪类选择器优先级一样，所以active必须写在hover前面，不然点击时依然和鼠标覆盖时效果相同。而且link和visited必须写在hover和active前面，不然active和hover效果会被覆盖

2.其他伪类选择器见文档多了解学习

例如：两个冒号的伪类
::selection :当选择文本内容时的样式；（火狐里不可用，其他除ie6都可用)
火狐用 ::-moz-selection

3.伪元素选择器

伪元素用来表示元素中的一些特殊位置
例子：

<p>我是一个段落</p>
//
p:first-letter{
color:red;
}
段落中的 我 字会变红

:first-letter:第一个字
:first-line:第一行
:before:最前面，即<p>后，一般最前面是空，要结合content，content可以插入一些文字在最前面，然后被设置样式。
:after:与:before相同，是在</p>前。
例子：

<p>在东大门那里！</p>
//
p:before{
	content:"我";
	color:red；
}
输出：我在东大门那里！

4.属性选择器

作用：根据元素中的属性或属性值来选取指定元素
语法：
[属性名]：选取含有指定属性的元素
[属性名=“属性值”]：选取含有指定属性值的元素
[属性名^=“属性值”]：选取属性值以指定内容开头的元素
[属性名$=“属性值”]：选取属性值以指定内容结尾的元素
[属性名*=“属性值”]：选取属性值含有指定内容的元素
例子：

<p title="abc">111111111</p>
<p title="bcd">222222222</p>
<p title="def">333333333</p>
____________________________________________
[title]{
color:red;//选中全部
}
[title^="a"]{
color:red;//选中11111111
}
[title$="d"]{
color:red;//选中22222222
}
[title*="b"]{
color:red;//选中111111111和22222222
}

5.子元素伪类选择器

:first-child：选中第一个子元素，这个第一个有很多，比如p:first-child{}就指定了body里第一个p，div里第一个p，（注意，这个p必须是第一个元素，如果这个p前有个span什的，都不行，即意思为选择排在第一个且为p的那一个）等等。

:last-child:选中最后一个子元素。同上
:nth-child(参数)：在参数里选定一个数字，指定第几个。
特殊参数：
even：选择偶数个，可以实现隔行特效
odd:选择奇数个。
:first-of-type:与:first-child相似，child在所以子元素中排列，type在同类型子元素中排列
last-of-type:同上
nth-of-type:同上

6.兄弟元素选择器

作用：为同层次元素进行选择
语法：本身（前一个）+下一个元素：选择后一个元素
前一个~下一个元素：表示后面所以该元素
例子：为span的下一个元素p，添加背景颜色红色

<span>11111111111</span>
<p>22222222222222</p>
<p>3333333333333</p>
__________________________
span+p{
background-color:red;
}//选中222222222222
span~p{
background-color:red;
}//选中后面所有，2222222222和333333333333

7.否定伪类

作用·：从已经选中的元素中剔除出某些元素
语法： :not()
例子：

p:not(.p1){
font-size:150px;
}//从所用p中剔除了类为p1的元素。

8.选择器的优先级

形象化描述

内联指的是<p style="color:red">abcd</p>,这是内联的样式,因为内联样式优先级最高，所以不推荐，不然不好通过css更改样式。
但是有办法：在选择器里加!important，和内联一样，不推荐。
例子：

p{
color:red !important;
}//此时该选择其获得最高优先级，进行执行

指向一个元素的选择器中包含多种选择器时，需要将多种选择器相加然后比较，但是优先级计算不会超出其的最大数量级（再相加也不会跨级）。
例子：
p#p1{}和#p1{}就是执行p#p1{}
如果优先级一样，则执行靠后的哪一个，谁最后执行谁
另外：并集选择器的优先级是单独计算的。