《CSS权威指南》里提醒我们需要注意的小知识点（一）

1.元素分类

分法一：

替换元素：替代元素内容的部分并非由文档内容直接表示例如img和input

非替换元素：内容由用户代理（浏览器）在元素本身生成的框中显示

分法二：

块级元素：生成一个元素框，默认会填充父元素的内容区，旁边不能有其他元素

列表项是其中一个特例，会带有标记符，关联到元素框

行内元素：在一个文本行内生成文本框，不会打断这行文本

在head标签内可以使用link链接外部样式表

rel代表关系（alternate stylesheet可以提供一个候选样式表并在title属性中指定该样式的名字但不推荐使用title 使用不当会出现无法辨认或忽略首选样式表的问题）

type描述了使用link标记加载的数据的类型

href值是样式表的URL

media说明样式表要应用的媒体

在style标签中有一个与link类似的@import指令：@import url(sheet.css)

每个@import指令的样式表都会加载并使用无法使用候选样式表可以在@import之后列出要应用此样式的媒体最后

CSS注释用/* */ html注释用

CSS是不允许用嵌套注释的

CSS的核心特性就是向文档中的一组元素类型应用某些规则

规则的结构是选择器+声明块（由一个或多个声明组成，每个声明是一个属性-值对）

声明的统一格式是属性后面跟一个冒号，然后是一个值，然后一个分号，冒号和分号后面可以跟0个或多个空格。值要么是一个关键字，要么是该属性可取关键字的一个列表（多关键字）多关键字用空格分看

（选择器分组）如何为多个元素应用同一样式：例如h2,p {...} 将两个选择器用逗号分开，告诉浏览器，规则中包含两个选择器

通配选择器 *等价于列出文档所有元素的一个分组选择器

（声明分组）声明块中各个声明用分号隔开

（1）类选择器

通用类选择器：直接用.warning{...}相当于选择所有类名为warning的元素，等价于*.warning{...}

元素特定类选择器：span.warning{...}指定calss为warning的span元素

多类选择器：一个class可以包含一个词列表每个词用空格分开

例如源代码中class=”urgent warning” CSS中写为.urgent.warning{...}

（2）ID选择器

（3）属性选择器

1.简单属性选择器：用于要选择有某个属性的元素，不论属性的值 a[title]{...}

2.根据具体属性值选择：a[title=”mm gg”]{...}

3.根据部分属性值选择：a[title~=”mm”]

4.子串匹配属性选择器

[title^=”mm”] title属性的属性值以”mm”开头的所有元素

[title$=”mm”] title属性的属性值以”mm”结尾的所有元素

[title*=”mm”] title属性的属性值包含”mm”的所有元素

5.特定属性选择器：[title|=“mm”]选择title属性值等于mm或以mm开头的元素

后代选择器（包含选择器）

创建一些仅在某些结构中起作用的规则，例如：h1 em{...}

子选择器只匹配树中直接相连的元素

例如：

只能有p>a{..}或者a>strong{..} 不能有p>strong

相邻兄弟选择器要求按源顺序出现例如：h1+p{...}选择紧邻在h1元素后出现的所有段落，h1和p要有共同的父元素如果没有p和h1挨着的就不能用p+h1{...}

7.伪类选择器

链接伪类（只用于超链接标签）：

:link 指向一个有href属性的未访问的链接的所有锚（a标签）

:visited 指向访问过的链接

动态伪类

:focus 指示当前拥有输入焦点的元素

:hover 指示鼠标停留的元素

:active 指示被用户输入激活的元素

选择第一个子元素

例如：em.first-child{...}含义是选择作为某元素第一个子元素的所有em

8.伪元素选择器

设置首字母样式： p:first-letter{...}

设置第一行样式： p:first-line{...}

设置之前之后元素的样式 p:before{...} p:after{...}

9.选择器的特殊性

用户代理会确定哪些规则与一个元素匹配，计算所有相关声明及其特殊性，确定哪些规则胜出，将胜出的规则应用到元素

如果某个声明非常重要可以在这个声明的分号之前加 !important

通配选择器的特殊性是0000

样式的继承机制：继承是没有特殊性的比通配还低

posted on 2016-11-16 16:07 Veitch 阅读(112) 评论(0) 编辑收藏举报