CSS基础知识2-伪类

伪类选择器

伪类专门用来表示元素的一种特殊的状态，比如：被点击后，鼠标移入时。

当我们需要为这些处在特殊状态的元素设置样式时，就需要使用伪类。

为没访问过的链接设置一个样式

语法：:link  表示普通的链接（没访问过的）

例子：a:link{color:red;}

为访问过的链接设置一个样式

语法：:visited{}  表示访问过的链接

例子：a:visited{color:yellow;}

为鼠标移入时设置一个样式

语法：:hover  表示鼠标移入的状态

例子：a:hover{color:green;}

为链接被点击时设置一个样式

语法：:active{}

例子：a:active{color:blue;}

注：:hover以及:active可以为其他元素设置，不仅限于超链接。但是在IE6中仅限于超链接。

伪类的顺序

为上述伪类设置样式时一般按照L(:link) V(:visited) H(:hover) A(:active)设置，他们的优先级一样，按该顺序写保证不会被覆盖。

为元素获取焦点的状态设置一个样式

语法：:focus{}  一般用于文本框

例子：input:focus{color:pink;}

为标签中选中的内容设置一个样式

语法：::selection{}  这里使用了两个:

例子：p::selection{background:red;}

伪元素

使用伪元素来表示元素中的一些特殊位置

:first-letter表示第一个字符

:first-line表示文字的第一行

:before表示元素最前边的部分（一般结合content这个样式使用，通过content向before或after的位置添加一些内容）

:after表示元素最后边的部分

属性选择器

属性选择器可以根据元素中的属性或属性值来选取指定元素

语法：

首先需要为元素设置一个title属性，该属性可以为任何标签指定，当鼠标移动到该元素时，元素上的title属性值会作为文字显示

<p title="hello">我是一个p标签</p>

[属性名]选取含有指定属性的元素

[属性名=“属性值”]选取含有指定属性的元素

[属性名^="属性值"]选取属性值以指定内容开头的元素

[属性名$="属性值"]选取属性值以指定内容结尾的元素

[属性名*="属性值"]选取属性值以包含指定内容的元素

子元素的伪类

:first-child  可以选中第一个子元素

:last-child  可以选中最后一个子元素

:nth-child(参数)  可以选中指定位置的子元素，该选择器后边可以指定一个参数表示选中第几个子元素，也可以是even（表示偶数位置子元素）、odd（表示奇数位置子元素）。

:first-of-type

:last-of-type

::nth-of-type

和上面的相似，只不过child这些是在所有元素中排列并选择，而type是在当前类型的子元素中排列选择。

兄弟元素选择器

作用：可以选中一个元素后边紧挨着的兄弟元素

语法：前一个元素+后一个元素（后一个为兄弟元素选择器，即选中的是后一个）

例子：p+a{}

同时也可以选中后面的所有兄弟元素

语法：前一个元素~后边所有

例子：p~a{}

否定伪类

否定伪类 可以从已选中的元素中剔除出某些元素

语法：:not(选择器)

例子：p:not(#a1){}