1. 选择器
（1）类型选择器（标签选择器）
基本语法
E { sRules } 使用说明
类型选择器。以文档对象(Element)类型作为选择器。 选择面较大，适合做某种标签元素外观的常规设置。
代码示例
<style type="text/css" media="screen">
p {
text-align: center;
color: red;
}
h1 {
text-align: right;
color: green;
}
</style>
<body>
<h1>This heading will be center-aligned</h1>
<p>This paragraph will also be center-aligned.</p>
</body>（2）通用选择器
基本语法
* { sRules } 使用说明
通用选择器。选定文档目录树(DOM)中的所有类型的单一对象。假如通用选择器不是单一选择器中的唯一组成，“*”可以省略。
代码示例
<style type="text/css" media="screen">
* {
text-align: center;
color: blue;
}
</style>
<body>
<h1>This heading will be center-aligned</h1>
<p>This paragraph will also be center-aligned.</p>
<div>This is a div.</div>
</body>（3）id 选择器
基本语法
#ID { sRules } 使用说明
ID选择器。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择器。 ID 名称不能以数字开头！
代码示例
<style type="text/css" media="screen">
#red {
color:red;
}
#green {
color:green;
}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>（4）class 选择器
基本语法
E.className { sRules } 使用说明
网页中，无论什么标签的元素，只要class属性和该类选择器的名字一致，则被选中。类名的第一个字符不能使用数字！
类选择器在定义的时候，需要在类名字前放置一个 . 符号，以表征这个不是标签选择器，而是类选择器，在使用的时候，则不需要这个. 符号。其效果等同于E [ class ~= className ]
一个元素属于某种类选择器控制范围，加上class属性就可以了。 类选择可以跨标签，无论什么标签，只要class属性和该类名字一致，就属于这个类选择器控制范围。一个标签可以被多个类选择器修饰，同样的类选择器，如果属性有冲突，将会覆盖前头的属性值，定义（非调用）在后头的优先级高于前头。
代码示例
<style type="text/css" media="screen">
.red {
color: red;
text-align: left;
}
.center {
text-align: center;
}
</style>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center red">
This paragraph will also be center-aligned.
</p>
</body>（5）属性选择器
基本语法
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules } 使用说明
属性选择器。
选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E
代码示例
<style type="text/css" media="screen">
p[class=demo] {
color: red;
}
</style>
<body>
<p class="demo">
This paragraph will also be center-aligned.
</p>
</body>（6）选择器分组
基本语法
E1 , E2 , E3 { sRules } 使用说明
选择器分组。将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组。
代码示例
<style type="text/css" media="screen">
h1, p, div {
text-align: center;
color: red;
}
</style>
<body>
<h1>This heading will be center-aligned</h1>
<p>This paragraph will also be center-aligned.</p>
<div>This is a div.</div>
</body>（7）包含选择器 （后代选择器）
基本语法
E1 E2 { sRules } 使用说明
包含选择器。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。 即选取某元素的后代元素。
代码示例
<style type="text/css" media="screen">
div p {
background-color:yellow;
text-align: center;
}
</style>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<span><p>段落 2。 在 div 中的 span 中。</p></span>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>（8）子对象选择器
基本语法
E1 > E2 { sRules } 使用说明
子对象选择器。选择所有作为 E1 子对象的 E2 。与包含选择器相比，子对象选择器只能选择作为某对象子对象的元素。
代码示例
<style type="text/css" media="screen">
div>p {
background-color:yellow;
text-align: center;
}
</style>
<body>
<div>
<h2>标题</h2>
<p>段落 1。 在 div 中。</p>
<span><p>段落 2。 在 div 中的 span 中。</p></span>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>（9）相邻兄弟选择器
基本语法
E1 + E2 { sRules } 使用说明
相邻选择器。选择所有作为 E1 元素相邻的下一个元素E2 。 选择紧接在另一个元素后的元素，而且二者有相同的父元素。
代码示例
<style type="text/css" media="screen">
h1+p, div+p {
text-align: center;
color: red;
background-color:yellow;
}
</style>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<h1>Welcome to My Homepage</h1>
<div>
<h1>My name is Donald</h1>
<p>I live in Duckburg.</p>
<p>I will not be styled.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>（10）后续兄弟选择器
基本语法
E1 ~ E2 { sRules } 使用说明
后续兄弟选择器。选择所有作为 E1 元素之后的兄弟元素 E2 。
代码示例
<style type="text/css" media="screen">
div~p {
text-align: center;
color: red;
background-color:yellow;
}
</style>
<body>
<p>之前段落，不会选中。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>（11）伪类及伪对象选择器
基本语法
E : Pseudo-Classes { sRules }
E : Pseudo-Elements { sRules } 使用说明
CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪类列表
| 伪类列表 | 伪类列表 | 伪类列表 | 伪对象列表 |
|---|---|---|---|
| :link | :hover | :active | :first-letter |
| :focus | :first-child | :first | :first-line |
| :visited | :left | :right | :before |
| :lang | :after |
（11.1）:link
基本语法
Selector : link { sRules } 使用说明
设置元素在未被访问前的样式。默认值由浏览器决定。
对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
IE3将 :link 伪类的样式表属性作用于 visited 伪类。
代码示例
a:link { color: red }
:link { color: red }（11.2）:hover
基本语法
Selector : hover { sRules } 使用说明
设置对象在其鼠标悬停时的样式。
在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。
代码示例
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */（11.3）:active
基本语法
Selector : active { sRules } 使用说明
设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
并且 :active 可以和 :link 以及 :visited 状态同时发生。
代码示例
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */（11.4）:visited
基本语法
Selector : visited { sRules } 使用说明
设置 a 对象在其链接地址已被访问过时的样式。 IE3将 :link 伪类的样式表属性作用于 :visited 伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。
代码示例
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */（11.5）:focus
基本语法
Selector : focus { sRules } 使用说明
设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。
代码示例
a:focus { background: yellow }
a:focus:hover { background: white }（11.6）:first-child
基本语法
Selector : first-child { sRules } 使用说明
设置 E 的第一个子对象的样式。
代码示例
* > a:first-child /* A is first child of any element */
a:first-child /* Same */（11.7）:first
基本语法
Selector : first { sRules } 使用说明
设置页面容器第一页使用的样式。仅用于 @page 规则
代码示例
@page :first { margin: 4cm } （11.8）:left
基本语法
Selector : left { sRules }使用说明
设置页面容器位于装订线左边的所有页面使用的样式。仅用于 @page 规则。
代码示例
@page :left { margin: 4cm } （11.9）:right
基本语法
Selector : right { sRules }使用说明
设置页面容器位于装订线右边的所有页面使用的样式。仅用于 @page 规则。
代码示例
@page :right { margin: 4cm } （11.10）:lang
基本语法
Selector : lang { sRules }使用说明
设置对象使用特殊语言的内容的样式。
代码示例
html:lang(fr-ca) { quotes: '? ' ' ?' }
html:lang(de) { quotes: '?' '?' '\2039' '\203A' }
:lang(fr) > Q { quotes: '? ' ' ?' }
:lang(de) > Q { quotes: '?' '?' '\2039' '\203A' }（11.11）:first-letter
基本语法
Selector : first-letter { sRules } 使用说明
设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。
代码示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P {
font-size: 12pt;
line-height: 1.2
}
P:first-letter {
font-size: 200%;
font-style: italic;
font-weight: bold;
float: left
}
SPAN {
text-transform: uppercase
}
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>（11.12）:first-line
基本语法
Selector : first-line { sRules } 使用说明
设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
如果未强制指定对象的 width 属性， 首行的内容长度可能不是固定的。
代码示例
p:first-line { text-transform: uppercase }
<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>（11.13）:before
基本语法
Selector : before { sRules } 使用说明
用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。
（11.14）:after
基本语法
Selector : after { sRules }使用说明
用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。
扫一扫
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
