2-CSS添加样式

发表于 | 分类于 | | 阅读次数: | 本文总阅读量 次

CSS选择符

对于已经工作好年的前端农民来说，我依旧选择看
选择符种类：类型/元素、ID、Class、子选择符、同辈选择符…
ID和Class选择符不说了

子选择符与同辈选择符

子选择符”>” 只能选择所有的子辈元素不能选择孙元素
同辈选择符”+” 只能选择同一父级元素内该元素后面一个元素
一般同辈组合”~” 可以选择同一父级元素内该元素所有之后的元素

PS:这些选择符都不能够选择前面的同辈元素（因为给前面的元素添加选择符时，前面元素还没有被渲染出来）

通用选择符

1
2
3
4
5
6
7
8
9
10
11
12
13
*{margin:0;padding:0;}//这种方法并不好，因为会影响到button、select等表单元素应该具体指定

//应该按照下面方法来指定
h1,h2,...
ul,ol,dl,p{
    margin:0;
    padding:0;
}

//通配符也可以与后代结合使用
.list>*{//可以选择list类后面所有的元素
    /*...*/
}

属性选择符

属性选择符时基于元素是否有某个属性，或者属性是否有某个值来选择元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//鼠标悬停在下面带有title的元素上浏览器出现提示条 <abbr>元素可以对某个缩写词做出更详细的解释，因此需要区分

//以下是根据是否存在某个属性来选择的元素
<arrr title="wwwwwwww">www</abbr>
abbr[title]{color:#f00;}//此属性浏览器会默认加上下划线

//以下是通过特定的属性值来选择元素
input[type="submit"]{coursor:pointer;} //给所有的提交按钮更改鼠标悬停样式

//以下属性匹配某个模式，并非特定的值  ^表示开头  $表示结尾 *表示包含 ~这个特殊字符不咋看懂 | 这个特殊字符不好
a[href^="http:"]//表示选择a元素所有http:开头的元素
img[src$='.jpg']//表示选择所有图片src属性结尾是.jpg的元素
a[href*="/about/"]//表示选择a元素href属性值包含/about/的元素

~
|
//以上2个不多做解释

伪元素

选择页面区域不是用元素来表示，这种叫伪元素

1
2
3
4
5
::first-letter //选择一段文本的第一个字符
::first-line 选择一段文本的第一行

::before //内容开头
::after //内容结尾

ps:使用伪元素时不能够插入对交互有影响的内容，会造成css不能正确加载

伪类

PS：注意区别伪类和伪元素 一个使用”:””::” 伪元素单冒号写法某些浏览器也是兼容的，尽量使用兼容写法”::”

1
2
3
4
5
6
7
8
//未访问过链接的样式
a:link{}
//访问过链接的样式
a:visited{}
//鼠标悬停及获取键盘焦点时的样式
a:hover,a:fouce{}
//活动状态时为紫色
a:active{}

以上顺序不可颠倒
很多元素都具有:hover 但是触摸屏和键盘输入方式不一定有这个状态，因此不能在重要交互地方使用该类型

目标与反选

:target 与他匹配的元素有一个ID属性，而且该属性出现在url末尾的’#’号后面，可以使用:target选择到该标记
.comment:target{}

反选
:not() 选择符
里面可以放其他元素自身除外

结构化伪类

css3新增了一些新的伪类 常用的nth-child选择符 可接受odd(奇数)even(偶数) 还可以使用表示n+1这种 n从0开始 知道匹配没有元素
n也可以为负值，可以修改自身和前面的元素
n为负值时候是选取不到值的，只有当表示>=0时候才能选中比如(-n+3) 这个表示只能选前三个，因为当n为4的时候这个表达式的值为-1 选取不到了

nth-last-child() 这个伪类是从最后一个元素开始计算
ps:在ie8之前的浏览器不支持这些结构化伪类

表单伪类

html5新增表单输入框的几个属性
:require //表示必填表单
:optional //表示非必填表单伪类
input type同样也有些属性值如email

1
2
3
4
5
6
input[type='email']{}
input[type='email']:vaild{} //表单输入正确

input[type='email']:invaild{} //表单输入错误

input[type="number"]:in-range/out-of-range..

ps:这些新增的html5表单伪类并不支持ie10以下

层叠

指多条选择规则选择同一个元素时，每个层级的级别不一样
从高到底分别是

1
2
3
4
5
1. 标注为!important的用户样式
2. 标注为!important的作者样式
3. 作者样式
4. 用户样式
5. 浏览器（用户代码）的默认样式

在以上基础上，规则再按选择写的先后顺序，后写的覆盖写先的

特殊性

也就是选择符的权重问题

利用层叠次序

css定义的先后位置很重要，如果在相同的权重下

控制特殊性

尽量不适用id选择器，去掉对上下文的引用。尽可能使样式可以复用

特殊性与调试

谷歌浏览器可以搞定

继承

继承的的属性值没有任何特性，连通配符权重都比这个高，比如给body设置color其他没有设置color的元素都会继承于此

为文档应用样式

导入的三种方式head里面直接定义style标签、link引入、@import引入方式 不推荐最后一种

性能

css不需要延迟加载，样式放在head中因为浏览器渲染需要html与css

减少http请求

线上网页尽可能控制css在1到2个，不要引入一个link在其中使用@import 这需要发送额外的请求

压缩和缓存内容

gzip压缩线上资源
可以让web服务器帮助设定css的缓存时间，可以通过http首部告诉浏览器缓存时间
合理的压缩和合理的缓存是提升网站性能最重要的2件事

不让浏览器渲染阻塞JavaScript

主流做法：在body结束标签之前引入js文件 这样不会在渲染页面时候先让js文件阻塞了进程

现代做法：给script标签加上async/defer 异步加载脚本 不阻断html解析
async：属性会异步加载脚本，但是会在加载完毕时立刻解析脚本，阻断html解析
defer：属性也会异步加载脚本，不过会等到html解析完毕后执行加载的脚本
PS：ie10及其更早的版本不支持上述2个属性，所以选择用主流方法更合适

小结

1
2
1.避免层叠样式的特殊性，即尽可能不要使用id选择器和不要使样式过多层叠
2.影响网页性能的方式要注意