css样式优先级

样式优先级

CSS样式分为内联样式和外部样式，一般情况下：内联样式的优先级大于外部样式。即style样式>id选择器>class选择器>元素选择器。

例如：

.on{
	width:20px;
	height:20px;
	line-height:20px;
	font-weight:bold;
	background-color: #BCC029;
}
.person-num>li{
	float: left;
	list-style: none;
	color: #fff;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 1px;
	border: 1px solid #707070;
	background-color: #995B5B;
}

<ul class="person-num">
 <li class="on">.on样式</li>
 <li>.person-num样式</li>
</ul>

.on样式和.person-num>li重复的部分将不会生效，.person-num>li的优先级更高。但是有些时候我们需要让自定义的样式始终生效，那么可以使用!important标识。但建议轻易不要使用。

优先级顺序:!important>style>id>伪类>属性选择器>class>tag>声明先后顺序>全局选择器。

伪类、属性选择器、class本为同一级别的优先级，主要区别在其他顺序上。

!important的意思是我是最重要的，其他样式都不能代替。一旦设定不可修改和覆盖。

例如：

line-height:20px!important;

当选择器相同时，根据声明先后顺序确定优先级。

计算方法

优先级计算：（可理解为2进制代码）

style:1,0,0,0		//十进制即权重值1000

id:0,1,0,0			//十进制即权重值100

class:0,0,1,0      //十进制即权重值10

tag:0,0,0,1        //十进制即权重值1

计算原则：

1. 遵循单一样式的优先级
2. 标签 #id>#id;
   标签 .class>.class
3. 越具体，值越大，值越大，越优先
4. 相同的样式类型，值加1(二进制)

例如：

.h1{/*0 0 1 0*/
	color:blue;
}
div .h1{/* 0 0 1 1 */
	color:green;
}
div #id .h1{/* 0 1 1 1 */
	color:green;
}
div #id #ip .h1{/* 0 2 1 1 */
	color:balck;
}

子选择器
子选择器仅指直接后代，用>来进行选择，通常所说的后代选择器则是所有后代，包含孙子、从孙等后代，用空格进行选择。

例如：

#muen .towmuen li{
	height:35px;
	border-bottom: 1px dashed #D3D3D3;
	padding-top:11px;
}

选择twomuen样式下所有的li标签，包含孙子层等非第一代后代层。

#muen .towmuen>li{
	height:35px;
	border-bottom: 1px dashed #D3D3D3;
	padding-top:11px;
}

选择twomuen样式下的直系第一代li标签。

@import和Link的区别

• link是html标签，所有浏览器均支持。@import是css2.1之后的语法，在IE5+才被支持。
• link不仅可以用于样式引入，还可用于图片等资源引入。@import只能用于引入样式文件
• link在页面加载的同时进行加载。@import在页面加载完成后才进行加载。
• link可存在页面任意位置。@import只能存在<style>标签内或者css样式文件头部。
• link可通过javascript进行dom标签操作。@import不支持。

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />
<link rel="stylesheet" href="index.css"/>

只能用于html页面，不能用于css文件中，但可以使用js操作link的增删。

@import url(index.css)

只能用于css文件或者style标签内