《HTML+CSS》视频6 伪类、伪元素、选择器

伪类专门用来表示元素的一种特殊的状态，比如访问过得超链接和普通的超链接，比如获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类选择器。

浏览器可以通过历史记录来判断一个链接是否访问过。

给超链接定义样式：
a：link 正常链接
a：visited 访问过的链接（只能设置颜色）
a：hover鼠标滑过的链接（这个很有用）
a：active正在点击的链接

a:link{color: aqua;}

hover和active也可以对其他标签使用。

其他的：
:focus：获取焦点
:before：指定元素前
:after：指定元素后
::selection：选中的元素
input标签可以生成一个文本框，就可以使用focus来获取焦点后更改一些样式。
selection有两个冒号：可以用来对选中的文字样式进行设置，这个伪类在火狐中需要使用另一种方式：-moz-selection。可以写两个，用来兼容浏览器。

伪元素：使用伪元素来表示元素中的一些特殊位置。
:first-letter：首字母
:first-line：首行

Ctrl+shift+f ：格式化文字

p:before:元素最前面的部分（默认什么都没有,一般会结合content使用,并且content中的内容不能被选中）
p:before:元素最前面的部分

p:before{
		content: "我是你大爷";
		color: red;
		}

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

title属性：可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性值将会作为提示文字显示。

<p title="我是title中的文字"> 我是一个段落</p>

可以为所有有title属性的元素设置样式。[属性名]

p[title]{background-color:yellow;}

也可以为特定title属性值的元素设置样式：[属性值=“属性值”]

p[title="hello"]{background-color:yellow;}

还可以对title属性值的格式进行选择，[属性名^=“属性值”] 以指定内容开头
比如下面在title后加^表示以"he"为开头

p[title^="he"]{background-color:yellow;}

[属性名$=“属性值”] 以指定内容结尾
[属性名*=“属性值”] 以含有指定内容

子元素选择器：
:first-child：可以选中第一个子元素
p:first-child：是p标签，并且是第一个子元素
:first-child ：第一个子元素
body >p:first-child：body标签下的是p标签，并且是第一个子元素

:last-child ：最后一个子元素
:nth-child(m)：可以选中第m个子元素，m不仅可以是数字，还可以传入参数even，表示第偶数个，odd表示第奇数个。

child表示在所有类型当中寻找，type表示在当前类型的子元素中寻找。
p:first-of-type ：第一个p标签
:last-of-type：最后一个
:nth-of-type(m)：第m个

+表示后一个兄弟元素选择器，可以选中一个元素后紧挨着的后一个指定的兄弟元素。
span+p{}：选中span后紧挨着的第一个p标签，两个条件都得满足。

span~p{}：选中后面的所有指定的兄弟元素。

否定伪类选择器：可以从已选中的元素中剔除某些元素。
p:{not.hello}：选中所有除了属于hello的class的p标签。