<<<
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
(1)class选择器:
选择并设置 class="abc" 的元素的样式：

.abc
{
background-color:yellow;
}

.class 选择器选取带有指定类 (class) 的元素。
选择 class="abc" 的所有元素。

(2)id选择器:
为 id="abc" 的元素设置样式：

abc

{
background-color:yellow;
}

(#id 选择器为带有指定 id 的元素设置样式。)
选择 id="abc" 的所有元素。

(3)*选择器:
选择所有元素，并设置它们的背景色：

{
background-color:yellow;
}

• 选择器选取所有元素。

• 选择器也能选取另一个元素中的所有元素：

(4)element选择器：
选择并设置所有 <p> 元素的样式：

p
{
background-color:yellow;
}

element 选择器用于指定元素名称的所有元素。
选择所有 <p> 元素。

(5)element,element 选择器：
选择并设置所有 <h1> 样式和所有 <p> 元素的样式：

h1,p
{
background-color:yellow;
}

element,element 选择器用于用于同时选取多个元素。
(选择所有 <div> 元素和所有 <p> 元素。)
如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。

(6)element element 选择器:
选择并设置位于 <div> 元素内部的每个 <p> 元素的样式：

div p
{
background-color:yellow;
}

element element 选择器用于选取元素内部的元素。
选择 <div> 元素内部的所有 <p> 元素。

(7)element>element 选择器:
选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色：

div>p
{
background-color:yellow;
}

element>element 选择器用于选取带有特定父元素的元素。

注释：如果元素不是父元素的直接子元素，则不会被选择。

(8)element+element 选择器:
选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色：

div+p
{
background-color:yellow;
}

element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

(9)[attribute] 选择器:
为带有 attribute属性的 <a> 元素设置样式：

a[attribute]
{
background-color:yellow;
}

[attribute] 选择器用于选取带有指定属性的元素。

(10)[attribute=value] 选择器:
为 attribute="_blank" 的 <a> 元素设置样式：

a[attribute=_blank]
{
background-color:yellow;
}

(11)[attribute~=value] 选择器：
选择 titile 属性包含单词 "flower" 的元素，并设置其样式：

[title~=flower]
{
background-color:yellow;
}

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。
选择 title 属性包含单词 "flower" 的所有元素。

(12)[attribute|=value] 选择器:
选择 lang 属性值以 "en" 开头的元素，并设置其样式：

[lang|=en]
{
background-color:yellow;
}

[attribute|=value] 选择器用于选取带有以指定值开头的属性值的元素。

注释：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。
选择 lang 属性值以 "en" 开头的所有元素。

(13):link 选择器:
选择未被访问的链接，并设置其样式：

a:link
{
background-color:yellow;
}

:link 选择器用于选取未被访问的链接。

注释：:link 选择器不会设置已经访问过的链接的样式。
选择所有未被访问的链接。

(14):visited 选择器:
选择已访问的链接，并设置其样式：

a:visited
{
background-color:yellow;
}

:visited 选择器用于选取已被访问的链接。

:active 选择器:
选择活动链接，并设置其样式：

a:active
{
background-color:yellow;
}

:active 选择器用于选择活动链接。

当您在一个链接上点击时，它就会成为活动的（激活的）。

:hover 选择器:
选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{
background-color:yellow;
}

:hover 选择器用于选择鼠标指针浮动在上面的元素。

:focus 选择器:
选择获得焦点的输入字段，并设置其样式：

input:focus
{
background-color:yellow;
}

:focus 选择器用于选取获得焦点的元素。

:first-letter 选择器:
选择每个 <p> 元素的首字母，并为其设置样式：

p:first-letter
{
font-size:200%;
color:#8A2BE2;
}

:first-letter 选择器用于选取指定选择器的首字母。

:first-line 选择器:
选择每个 <p> 元素的首行，并为其设置样式：

p:first-line
{
background-color:yellow;
}

:first-line 选择器用于选取指定选择器的首行。

:first-child 选择器:
选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：

p:first-child
{
background-color:yellow;
}

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器

:before 选择器:
在每个 <p> 元素的内容之前插入新内容：

p:before
{
content:"哥哥：";
}

:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

:after 选择器:
在每个 <p> 元素的内容之后插入新内容：

p:after
{
content:"弟弟：";
}

:after 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

:lang 选择器:
选择带有以 "en" 开头的 lang 属性值的每个 <p> 元素，并设置其样式：

p:lang(en)
{
background:yellow;
}

所有主流浏览器都支持 :lang 选择器。

注释：对于 IE8 中的 :lang，必须声明 <!DOCTYPE>。

element1~element2 选择器:
为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：

p~ul
{
background:#ff0000;
}

所有主流浏览器都支持 element1~element2 选择器。

注释：对于 IE8 中的该选择器，必须声明 <!DOCTYPE>。

[attribute^=value] 选择器:
设置 class 属性值以 "test" 开头的所有 div 元素的背景色：

div[class^="test"]
{
background:#ffff00;
}

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

[attribute$=value] 选择器
设置 class 属性值以 "test" 结尾的所有 div 元素的背景色：

div[class$="test"]
{
background:#ffff00;
}

[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素。

[attribute*=value] 选择器
设置 class 属性值包含 "test" 的所有 div 元素的背景色：

div[class*="test"]
{
background:#ffff00;
}

[attribute*=value] 选择器匹配属性值包含指定值的每个元素。

:first-of-type 选择器:
指定父元素的首个 p 元素的背景色：

p:first-of-type
{
background:#ff0000;
}

:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

提示：等同于 :nth-of-type(1)。

:last-of-type 选择器:
指定父元素的最后一个 p 元素的背景色：

p:last-of-type
{
background:#ff0000;
}

:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

提示：等同于 :nth-last-of-type(1)。

:only-of-type 选择器:
指定属于父元素的特定类型的唯一子元素的每个 p 元素：

p:only-of-type
{
background:#ff0000;
}

:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。

:only-child 选择器:
规定属于其父元素的唯一子元素的每个 p 元素：

p:only-child
{
background:#ff0000;
}

:only-child 选择器匹配属于其父元素的唯一子元素的每个元素

:last-child 选择器:
指定属于其父元素的最后一个子元素的 p 元素的背景色：

p:last-child
{
background:#ff0000;
}

:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

提示：p:last-child 等同于 p:nth-last-child(1)。

:empty 选择器:
指定空的 p 元素的背景色：

p:empty
{
background:#ff0000;
}

:empty 选择器匹配没有子元素（包括文本节点）的每个元素

:target 选择器:
突出显示活动的 HTML 锚：

p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。

:enabled 选择器:
为所有 type="text" 的已启用的 input 元素设置背景色：

input[type="text"]:enabled
{
background-color: #ff0000;
}

:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。

:disabled 选择器:
为所有 type="text" 的被禁用的 input 元素设置背景色：

input[type="text"]:disabled
{
background-color: #dddddd;
}

:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。

:checked 选择器:
为所有被选中的 input 元素设置背景色：

input:checked
{
background-color: #ff0000;
}

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

:not 选择器:
设置非 <p> 元素的所有元素的背景色：

:not(p)
{
background-color: #ff0000;
}

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

::selection 选择器:
使被选中的文本成为红色：

::selection
{
color:#ff0000;
}

::-moz-selection
{
color:#ff0000;
}

::selection 选择器匹配被用户选取的选取是部分。

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。