0.通配符选择器：*
说明: 该选择器可以与任何元素匹配
* {color:red;}
1.标签选择器[元素选择器]:
说明: 使用元素名来设置样式
div
{
color:#ff0000;
}
2.分组选择器：
说明:逗号分隔的元素都会被设置css样式
div,p,ul,input
{
color:#ff0000;
}
3.派生选择器[后代选择器]:
说明:
li strong {
font-style: italic;
font-weight: normal;
}
4.子元素选择器，只能选择某元素子元素的元素
h1 > strong {color:red;}
5.相邻兄弟元素选择器，可选择紧接在另一元素后的元素，且二者有相同父元素
h1 + p {margin-top:50px;}
6.普通兄弟选择器，匹配的元素在指定元素之后，但不一定相邻
div~p{color:red}
7.id选择器：已#来定义
说明: 使用元素中定义的id属性值来设置样式
#id_name
{
color:#ff0000;
}
#id_name div
{
color:#ff0000;
}
div #id_name
{
color:#ff0000;
}
8.类选择器：用.来显示
说明: 使用元素中定义的class的类名来设置样式
.class_name
{
color:#ff0000;
}
(1) 选择器现在会匹配 class 属性包含 class_name 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性
p.class_name
{
color:#ff0000;
}
(2) 多类选择器
两个类选择器链接在一起，仅可以选择同事包含这些类名的元素（类名的顺序不限）
<p class="important warning"> This paragraph is a very important warning. </p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning{background:silver;}
9.属性选择器: 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
自定义属性也可以设置。
(1) 为带有 title 属性的所有元素设置样式：
[title]
{
color:#ff0000;
}
(2) 多个属性选择器，只需将属性选择器链接在一起即可
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title]
{
color:red;
}
(3) 为 title="W3School" 的所有元素设置样式，属性与属性值必须完全匹配
[title=W3School]
{
border:5px solid blue;
}
(4) 部分属性值选择，如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）
属性和值的选择器-多个值: 包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值
[title~=hello]
{
color:red;
}
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<h2 title="world" val='hello'>Hello world</h2>
<p title="student">Hello W3School students!</p>
(5)为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值
[lang|=en]
{
color:red;
}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
| 类型 | 描述 |
|---|
| [abc^="def"] |
选择 abc 属性值以 "def" 开头的所有元素 |
| [abc$="def"] |
选择 abc 属性值以 "def" 结尾的所有元素 |
| [abc*="def"] |
选择 abc 属性值中包含子串 "def" 的所有元素 |
| 选择器 | 描述 |
|---|
| [attribute] |
用于选取带有指定属性的元素。 |
| [attribute=value] |
用于选取带有指定属性和值的元素。 |
| [attribute~=value] |
用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] |
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] |
匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] |
匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] |
匹配属性值中包含指定值的每个元素。 |
10.伪类选择器：
语法： selector : pseudo-class {property: value} 或者css类与伪类选择器搭配 selector.class : pseudo-class {property: value}
(1) 例如:
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪类与css类配合使用：
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
(2) :first-child 伪类
说明: 选择某元素的第一个子元素
例如: p:first-child{ color:red; } 第一个规则将作为某元素第一个子元素的所有 p 元素设置为红色字体 ，[是选择某元素的第一个子元素为p元素,如果第一子元素不是p，其他子元素是p元素，也不会选中]
(3) :lang 伪类使你有能力为不同的语言定义特殊的规则。 简单理解就是在元素所在的范围加上指定的字符，类似插入字符功能。
<style type="text/css">
q:lang(no)
{
quotes: "+" "+";
}
</style>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
显示效果: 文字+段落中的引用的文字+文字
11.伪元素选择器 (1) :first-line 伪元素， 用于向文本的首行设置特殊样式
注释：":first-line" 伪元素只能用于块级元素。
例如: p:first-line { color:#ff0000; } 只会将p元素第一行文本设置样式
(2) :first-letter 伪元素，用于向文本的首字母设置样式
例如: p:first-letter {color:#ff0000;} 只会将p元素的首字母设置样式
(3) :before 伪元素，可以在元素的内容前面插入新内容
例如: h1:before { content:url(logo.gif); } 在每个 <h1> 元素前面插入一幅图片
(4) :after 伪元素， 可以在元素的内容之后插入新内容
例如: h1:after { content:url(logo.gif); } 在每个 <h1> 元素后面插入一幅图片