第三次网页前端培训笔记（CSS基础和选择器）

一、CSS基础

如果学习CSS则要首先学习HTML，CSS是指层叠样式表，首先要了解CSS的基础语法，包括id和class选择器，创建，背景，文本，字体，链接样式，列表样式，表格，盒子模型，边框，轮廓属性，外边距，填充，分组和嵌套，尺寸，定位，浮动，水平对齐，组合选择符以及等等。

1.多页面应用同一个样式

通常保存在外部的独立的 .CSS 文件（该文件不属于任何页面文件）可以在多个页面中使用同一个 CSS 样式表。通过在任何的页面文件中引用 .CSS 文件，你可以设置具有一致风格的多个页面。

2.样式层叠

样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

3.样式层叠次序

当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

二、CSS选择器

选择器	            用法
id选择器	        #myid
类选择器	            .myclassname
标签选择器	        div,h1,p
相邻选择器	        h1+p
子选择器             ul > li
后代选择器           li a
通配符选择器         *
属性选择器	        a[rel="external"]
伪类选择器	        a:hover, li:nth-child

1.选择器的优先级

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用 100 标示 ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：

div.test1 .span var 优先级 1+10 +10 +1

span#xxx .songs li 优先级1+100 + 10 + 1

#xxx li 优先级 100 + 1

1. 准确的选到要控制的标签；
2. 使用最合理优先级的选择器；
3. HTML 和 CSS 代码尽量简洁美观。

2.如何提升CSS选择器性能

1、避免使用通用选择器

.content  {color: red;}

2、避免使用标签或 class 选择器限制 id 选择器

避免使用

button#backButton {…}

避免使用
.menu-left#newMenuIcon {…}

推荐使用
#backButton {…}

推荐使用
#newMenuIcon {…}

3、避免使用标签限制 class 选择器

避免使用
treecell.indented {…}

推荐使用
.treecell-indented {…}

最优使用

.hierarchy-deep {…}

4、避免使用多层标签选择器。使用 class 选择器替换，减少 css 查找

避免使用
treeitem[mailfolder="true"] > treerow > treecell {…}

推荐使用
.treecell-mailfolder {…}

5、避免使用子选择器

避免使用
treehead treerow treecell {…}

BETTER, BUT STILL BAD 

treehead > treerow > treecell {…}

推荐使用
.treecell-header {…}

6、使用继承

避免使用
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }

推荐使用

#bookmarkMenuItem { list-style-image: url(blah) }

3.简介高效的CSS

1、不要在ID选择器前使用标签名

一般写法：DIV#divBox

更好写法：#divBox

解释： 因为ID选择器是唯一的，加上 div 反而增加不必要的匹配。

2、不要再class选择器前使用标签名

一般写法：span.red

更好写法：.red

解释：同第一条，但如果你定义了多个 .red，而且在不同的元素下是样式不一样，则不能去掉，比如你 CSS 文件中定义如下：

p.red{color:red;}  

span.red{color:#ff00ff}

3、尽量少使用层级关系

一般写法：#divBox p .red{color:red;}

更好写法：.red{..}

4、使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}