html提权页面,名师一课见真功：选择器先来提权、字体和图标、盒子模型口诀表...

一、选择器优先级、提权

1.同级别选择器 后面的样式覆盖前面的样式

2.不同级别：ID选择器>类选择器>标签选择器

3.如果需要继续提权使用多重选择器

4.计算公式：ID选择器数量，类选择器的数量，标签选择器的数量

5.通常用来重构原来的CSS样式

图表说明：标签

id

class

tag

说明

h2

0

0

1

tag 1个

body h2

0

0

2

tag 2个比上一个优先

html body h2

0

0

3

tag 3个比上一个优先

.box

0

1

0

class 进阶1位比上一个优先

h1.box

0

1

1

class 1个 tag 1个比上一个优先

#off

1

0

0

id 进阶1位比上一个优先

重要规则 ： id>class>tag(反复记三遍)

有一个计算公式：[id选择器的数量，class选择器的数量，tag选择器的数量]

tag级向class级进位，class级向id级进位。

可以采用增加class的方法提权。html body h2{color:red} tag已经无法提升，html是根元素，上面没有元素了。此时可以采用增加class的方法提权。

二、字体和字体图标样式

1.字体图标

阿里图标

@font-face{

font-family:'iconfont';

src:url('icon-font/iconfont.eot');

src:url('icon-font/iconfont.eot?#iefix')format('embedded-opentype'),

url('icon-font/iconfont.woff2')format('woff2'),

url('icon-font/iconfont.woff')format('woff'),

url('icon-font/iconfont.ttf')format('truetype'),

url('icon-font/iconfont.svg#iconfont')format('svg');

}

.iconfont{

font-family:"iconfont"!important;

font-size:100px;

color:skyblue;

font-style:normal;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

.iconfont.icon-kehuguanli{

color:green;

font-size:100px;

box-shadow:10px10px5px#888888;

}