css优先级

今天在使用公司内部框架的时候，发现一个问题。 我在页面的style元素里面写了一个class选择器，可是却不起作用。

使用F12查看，发现是当前的样式没有起作用，而是被框架生成的样式代替掉了。

当然，写内嵌的样式肯定是没问题。可问题就是，我明明在页面内部写了样式，按照常理，应该是我手写的类选择器的优先级高于外部引用的样式。

上网搜了一下，原来是涉及到了一个优先级的问题。

按照常理， css样式的优先级是：外部引用（link标签引入的）< 内部定义（即写到style标签内的）< 内嵌样式

当 内部定义的样式，在外部引用的样式的前面的时候， 这时候，起作用的就是外部引用的样式了。

比如：

<style type="text/css">   .btn{color:red}</style>

<link href ="../index.css" />

此时， 下面的样式将替换上面的样式。上面的将不再起作用。

我遇到的情况是， 这样写了样式，可是仍然不起作用。后来终于搜索到，是css 权值的问题，所谓权值，就是指 作用到某个元素上的css样式，会有一个整型值，这个值相加，就得到该元素的权值，权值大的样式的优先级将高于权值低的样式优先级。

权值的 大小：

1.  内联样式表的权值最高 1000；

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1

我在页面定义了一个如下样式：

 .rad {
		 		 height:13px ;
		 		 line-height:13px ;
		 		 width:20px ;
		 	}

该样式没有起作用。 F12查看，结果如下：

可见手动定义的.rad 样式在下方，而且没有起作用。

究其原因， 是我定义的样式的权值过低：  .rad  权值为10

而L5-all.css改样式的权值为： .L5form input   权值： 10+1 

因此我的样式不起作用。

故此，解决办法可以是：将我定义的样式的权值提高，提高可有两个办法，一个是 在我的样式的外层元素上定义一个id，使用id选择器 然后选择到这个样式，如：

 #lab_t .rad {
		 		 height:13px ;
		 		 line-height:13px ;
		 		 width:20px ;
		 	}

权值： 100+10=110.

如此，我的样式生效：

第二个办法：在当前的元素（input radio） 的外面的元素，定义一个样式， 然后使用该样式 定位到我的radio 元素。

如：

.lab_cls input{
		 	 	 height:13px ;
		 		 line-height:13px ;
		 		 width:20px ;
		 }

权值：10+1=11

权值相等，但是 这个样式在外部样式的后面，因此可以生效。

结果如图：

当然，这样略显麻烦，可以用加一个关键字，将我自定义的样式的优先级调整到最高：

该关键字是：!important

.rad {
		 		 height:13px !important;
		 		 line-height:13px !important;
		 		 width:20px !important;
		 	}

生效:

IE测试同样生效。