CSS选择符及其层叠性和优先级
利立德网络创业联盟
阿飞
2007-5-15 16:00:47
HTML标记
可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……
选择符组（使用 ， 分割多个选择符，不需调用）
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1， h2， h3， h4， h5， h6 { color: green }（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）p， table{ font-size: 9pt }（段落和表格里的文字尺寸为9号字）
效果完全等效于：p { font-size: 9pt }table { font-size: 9pt }
类选择符（使用 . 开头定义，class调用）
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right} p.center {text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
<p class="right"> 这个段落向右对齐的</p> <p class="center">这个段落是居中排列的</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，
.center {text-align: center}（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。如：<h1 class="center">这个标题是居中排列的</h1><p class="center">这个段落也是居中排列的</p>
注意：这种省略HTML标记的类选择符是我们今后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
ID选择符（使用 # 开头定义，id调用）
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
<p id="intro">这个段落向右对齐</p>
下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro{font-size:110%；font-weight:bold；color:#0000ff；background-color:transparent}
下面这个例子，ID属性只匹配id="intro"的段落元素：
p#intro{font-size:110%；font-weight:bold；color:#0000ff；background-color:transparent}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
包含选择符（使用空格分隔不同元素，不需调用）
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：table a{font-size: 12px}在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
样式表的层叠性
层叠性（继承性）：样式表的继承规则是外部的元素样式会保留下来继承给元素中包含的其他元素。
例如在DIV标记中嵌套P标记：div { color: red； font-size:9pt}……
<div><p>这个段落的文字为红色9号字</p></div>（P元素里的内容会继承DIV定义的属性）
另外，当样式表继承遇到冲突时，总是以最后定义的离定义对象距离最近的样式为准。
如果上例中定义了P的颜色：div { color: red； font-size:9pt} p {color: blue}……
<div><p>这个段落的文字为蓝色9号字</p></div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
选择符之间的优先级
ID选择符，类选择符和HTML标记选择符，ID选择符优先级最高，其次是类选择符。
如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……
选择符组（使用 ， 分割多个选择符，不需调用）
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1， h2， h3， h4， h5， h6 { color: green }（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）p， table{ font-size: 9pt }（段落和表格里的文字尺寸为9号字）
效果完全等效于：p { font-size: 9pt }table { font-size: 9pt }
类选择符（使用 . 开头定义，class调用）
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right} p.center {text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
<p class="right"> 这个段落向右对齐的</p> <p class="center">这个段落是居中排列的</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，
.center {text-align: center}（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。如：<h1 class="center">这个标题是居中排列的</h1><p class="center">这个段落也是居中排列的</p>
注意：这种省略HTML标记的类选择符是我们今后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
ID选择符（使用 # 开头定义，id调用）
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
<p id="intro">这个段落向右对齐</p>
下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro{font-size:110%；font-weight:bold；color:#0000ff；background-color:transparent}
下面这个例子，ID属性只匹配id="intro"的段落元素：
p#intro{font-size:110%；font-weight:bold；color:#0000ff；background-color:transparent}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
包含选择符（使用空格分隔不同元素，不需调用）
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：table a{font-size: 12px}在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
样式表的层叠性
层叠性（继承性）：样式表的继承规则是外部的元素样式会保留下来继承给元素中包含的其他元素。
例如在DIV标记中嵌套P标记：div { color: red； font-size:9pt}……
<div><p>这个段落的文字为红色9号字</p></div>（P元素里的内容会继承DIV定义的属性）
另外，当样式表继承遇到冲突时，总是以最后定义的离定义对象距离最近的样式为准。
如果上例中定义了P的颜色：div { color: red； font-size:9pt} p {color: blue}……
<div><p>这个段落的文字为蓝色9号字</p></div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
选择符之间的优先级
ID选择符，类选择符和HTML标记选择符，ID选择符优先级最高，其次是类选择符。
如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
责任编辑: 阿飞
参与评论
- 相关文章
- 最新文章
- CSS基本语法[05-15]
- Css样式调用方法[05-15]
- “路径”概念辨析[05-15]
- html部分标签的用法解释[05-15]
- XHTML的合法标签[05-15]
- Xhtml1.0规范[05-15]
