CSS学习之第二章《选择符与结构》(4)
2005-12-16 16:37
399 查看
结构
上下文选择符:
格式:H1 EM{color:gray;}
在一个上下文选择符里,规则的选择符方是由两个或更多个以空格符分隔的选择符组成的。每个空格可以翻译成“在....中发现的”、“是...的一部分”、或者“它是...的后代”,但是前提是按从后至前的顺序读选择符。H1 EM可以译作“任何EM元素,它是H1元素的后代”(如果坚持要从前往后读,可以译作“任何H1包含的EM元素”)。
当然也不仅限于两个选择符,如:UL OL UL EM{color:gray},任何无序列表下的有序列表下的无序列表内的强调文本将以灰色显示。
例:一个文档左边为蓝色背景,右边为白色背景,左右各有一系列链接,但链接颜色不能设为背景色,用上下文选择符刚可以这样:
TD.sidebar{background:blue;}
TD,main-page{background:white;}
TD.sidebar A:link{color:white;}
TD,main-page A:link{color:blue;}
继承
继承是一种机制,它允许样式不仅应用于某个特定的元素,而且应用于其后代。
例:H1{color:gray;}
<H1>Meerkat<EM>Central</Em></H1>
特殊性
特殊性(specificity)描述了不同规则的相对权重。
例:.grape{color:purple;}
h1{color:red;}
<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>
上例中将显示.grape的效果。
特殊性注释列表:
上下文选择符:
格式:H1 EM{color:gray;}
在一个上下文选择符里,规则的选择符方是由两个或更多个以空格符分隔的选择符组成的。每个空格可以翻译成“在....中发现的”、“是...的一部分”、或者“它是...的后代”,但是前提是按从后至前的顺序读选择符。H1 EM可以译作“任何EM元素,它是H1元素的后代”(如果坚持要从前往后读,可以译作“任何H1包含的EM元素”)。
当然也不仅限于两个选择符,如:UL OL UL EM{color:gray},任何无序列表下的有序列表下的无序列表内的强调文本将以灰色显示。
例:一个文档左边为蓝色背景,右边为白色背景,左右各有一系列链接,但链接颜色不能设为背景色,用上下文选择符刚可以这样:
TD.sidebar{background:blue;}
TD,main-page{background:white;}
TD.sidebar A:link{color:white;}
TD,main-page A:link{color:blue;}
继承
继承是一种机制,它允许样式不仅应用于某个特定的元素,而且应用于其后代。
例:H1{color:gray;}
<H1>Meerkat<EM>Central</Em></H1>
特殊性
特殊性(specificity)描述了不同规则的相对权重。
例:.grape{color:purple;}
h1{color:red;}
<H1 CLASS="grape">Meerkat <EM>Central</EM></H1>
上例中将显示.grape的效果。
特殊性注释列表:
H1{color: red;} | /*specificity=1 */ |
P EM{color:purple;} | /*specificity=2*/ |
.grape{color:purple;} | /*specificity=10*/ |
P.bright{color:yellow;} | /*specificity=11*/ |
P.bright EM.dark{color:brown;} | /*specificity=22*/ |
#id888{color:blue;} | /*specificity=100*/ |
相关文章推荐
- CSS学习之第二章《选择符与结构》(1)
- CSS学习之第二章《选择符与结构》(3)
- CSS学习之第二章《选择符与结构》(5)
- CSS学习之第二章《选择符与结构》(2)
- CSS学习笔记:选择符
- CSS学习(二)-结构伪类选择器、属性选择器
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第二章 HTML基础
- WEB标准学习路程之"CSS":10.伪类选择符
- scala学习第二章 控制结构与函数
- JavaScript CSS修改学习第二章 样式
- 信管16数据结构:第二章线性表 翻转课堂课前学习任务
- JavaScript CSS修改学习第二章 样式
- 【算法竞赛入门经典学习日记】第二章 循环结构程序设计
- CSS学习(1)选择符selector
- Intel汇编语言程序设计学习-第二章 IA-32处理器体系结构-上
- Intel汇编语言程序设计学习-第二章 IA-32处理器体系结构-下
- html及css学习笔记_2_html基本结构
- 前端学习第二章:认识html文件基本结构&认识head标签
- Unix原理与应用学习笔记----第二章unix的体系结构与命令用法
- css 样式基础(一) 选择符与结构