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> 元素的内容之后插入内容。
转载于:https://www.cnblogs.com/YeChing/p/6291631.html
