常用的css选择器

1.最基本的

* 	* 	选择所有元素。 
#id 	#firstname 	选择 id="firstname" 的元素。 	
.class 	.intro 	选择 class="intro" 的所有元素。
element 	p 	选择所有 <p> 元素。 	
element,element 	div,p 	选择所有 <div> 元素和所有 <p> 元素。 
element element 	div p 	选择 <div> 元素内部的所有 <p> 元素。 <div>元素不一定是其父元素
element>element 	div>p 	选择父元素为 <div> 元素的所有 <p> 元素。 	
element+element 	div+p 	选择紧接在 <div> 元素之后的 <p> 元素。 同一个父元素
element~element     div~p   选择 <div> 元素之后的所有 <p> 元素。不用紧接着，两种元素必须拥有相同的父元素

2.属性选择器

[attribute] 	[target] 	选择带有 target 属性所有元素。
[attribute=value] 	[target=_blank] 	选择 target="_blank" 的所有元素。
实例：
input[type=submit] {
  width: 150px;
  padding: 10px;
}
input[type=checkbox] {
  width: 10px;
}
a[target]
{
background-color:yellow;
}

3.伪类

（实现的功能与类类似，用于向某些选择器添加特殊的效果。实际上并没有类存在）

:link ,:visited ,:active ,:hover

:link 	a:link 	选择所有未被访问的链接。
:visited 	a:visited 	选择所有已被访问的链接。
:active 	a:active 	选择活动链接。
:hover 	a:hover 	选择鼠标指针位于其上的链接。(也可以使用到其他元素上)

:nth-child(n)，:nth-of-type(n)

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
    p:nth-child(2) 	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。
    p:nth-of-type(2) 	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
实例：
1.规定属于其父元素的第二个 p 元素的每个 p：
p:nth-of-type(2)
{
background:#ff0000;
}
2.为奇数和偶数 p 元素指定两种不同的背景色：
p:nth-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}
3.使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
p:nth-of-type(3n+0)
{
background:#ff0000;
}

:focus,:not(selector),::selection,:enabled,:disabled

:focus 	input:focus 	选择获得焦点的 input 元素。
:not(selector) 	:not(p) 	选择非 <p> 元素的每个元素。 	3
::selection 	::selection 	选择被用户选取的元素部分。
:enabled 	input:enabled 	选择每个启用的 <input> 元素。 	3
:disabled 	input:disabled 	选择每个禁用的 <input> 元素

4.伪元素

（伪元素用于向某些选择器设置特殊效果。实际代码文档中是看不见的）

:first-letter，:first-line ，:before ，:after

:first-letter 	向文本的第一个字母添加特殊样式。
    p:first-letter 	选择每个 <p> 元素的首字母。 	
:first-line 	向文本的首行添加特殊样式。
    :first-line 	p:first-line 	选择每个 <p> 元素的首行。 	
:before 	在元素之前添加内容。
    p:before 	在每个 <p> 元素的内容之前插入内容。
:after 	在元素之后添加内容。
    p:after 在每个 <p> 元素的内容之后插入内容。