CSS（Cascading Style Sheet），中文译为层叠样式表，可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入，就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册，或登录W3C官网（ http://www.w3c.org ）。
使用CSS，要了解常用的各种选择器。
1.标记选择器：
一个HTML页面由很多不同的标记组成，而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例：
每一个选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一标记名称声明多种样式。CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。 还有一种通配选择器“*”，表示其中设置的样式会应用于所有的网页元素。示例：
<html><head><title>class选择器</title>
<style type="text/css">
.red{ color: redfont-size:18px }
.green{ color: greenfont-size:20px }
</style></head>
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3使用class</h3>
</body>
</html>
<html><head><title>ID选择器</title>
<style type="text/css">
#bold{ font-weight: bold }
#green{ font-size:30pxcolor:#009900 }
</style></head>
<body>
<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
</body></html>
<html><head><title>交集选择器</title>
<style type="text/css">
p{ / 标记选择器 / color: blue }
p.special{ / 标记.类别选择器 / color: red }
.special{ / 类别选择器 / color: green }
</style></head>
<body>
<p >普通段落文本（蓝色）……</p>
<h3 >普通标题文本（黑色）……</h3>
<p class="special">指定了.special类别的段落文本（红色）……</p>
<h3 class="special">指定了.special类别的标题文本（绿色）……</h3>
</body>
</html>
<html><head><title>并集选择器</title>
<style type="text/css">
h1,h2,h3.h4.h5.p{ / 并集选择器 / color: purplefont-size:15px }
h2.special,.special,#one{ / 集体声明 / text-decoration:underline }
</style></head>
<body>
<h1 >示例文字h1……</h1>
<h2 class=”special” >示例文字h2……</h2>
<h3 >示例文字h3……</h3>
<p >示例文字p1……</p>
<p class="special">示例文字p2……</p>
<p id="one">示例文字p3……</p>
</body></html>
<html><head><title>后代选择器</title>
<style type=”text/css”>
p span{ / 嵌套声明 / color: red }
span{color:blue }
</style></head>
<body>
<p >嵌套使<span>用CSS（红色）</span>标记的方法</p>
嵌套之外的<span>标记（黑色）</span>不生效
</body></html>
:hover :visited :active :first-line :first-letter :first-child :nth-child :nth-of-type :nth-last-child
:nth-last-of-type
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
.class.intro选择 class="intro" 的所有元素。1
#id#firstname选择 id="firstname" 的所有元素。1
**选择所有元素。2
elementp选择所有 <p>元素。1
element,elementdiv,p选择所有 <div>元素和所有 <p>元素。1
element elementdiv p选择 <div>元素内部的所有 <p>元素。1
element>elementdiv>p选择父元素为 <div>元素的所有 <p>元素。2
element+elementdiv+p选择紧接在 <div>元素之后的所有 <p>元素。2
[attribute][target]选择带有 target 属性所有元素。2
[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2
[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。2
[attribute|=value][lang|=en]选择 lang 属性值以 "en" 开头的所有元素。2
:linka:link选择所有未被访问的链接。1
:visiteda:visited选择所有已被访问的链接。1
:activea:active选择活动链接。1
:hovera:hover选择鼠标指针位于其上的链接。1
:focusinput:focus选择获得焦点的 input 元素。2
:first-letterp:first-letter选择每个 <p>元素的首字母。1
:first-linep:first-line选择每个 <p>元素的首行。1
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p>元素。2
:beforep:before在每个 <p>元素的内容之前插入内容。2
:afterp:after在每个 <p>元素的内容之后插入内容。2
:lang(language)p:lang(it)选择带有以 "it" 开头的 lang 属性值的每个 <p>元素。2
element1~element2p~ul选择前面有 <p>元素的每个 <ul>元素。3
[attribute^=value]a[src^="https"]选择其 src 属性值以 "https" 开头的每个 <a>元素。3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a>元素。3
[attribute*=value]a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a>元素。3
:first-of-typep:first-of-type选择属于其父元素的首个 <p>元素的每个 <p>元素。3
:last-of-typep:last-of-type选择属于其父元素的最后 <p>元素的每个 <p>元素。3
:only-of-typep:only-of-type选择属于其父元素唯一的 <p>元素的每个 <p>元素。3
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p>元素。3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p>元素。3
:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p>元素的每个 <p>元素。3
:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p>元素。3
:root:root选择文档的根元素。3
:emptyp:empty选择没有子元素的每个 <p>元素（包括文本节点）。3
:target#news:target选择当前活动的 #news 元素。3
:enabledinput:enabled选择每个启用的 <input>元素。3
:disabledinput:disabled选择每个禁用的 <input>元素3
:checkedinput:checked选择每个被选中的 <input>元素。3
:not(selector):not(p)选择非 <p>元素的每个元素。3
::selection::selection选择被用户选取的元素部分。3
