我将CSS优先级总结为四个级别的优先，按照从高到低的顺序排列分别是标签离修饰内容近，!important相关，选择器级别，CSS代码位置靠下。在比较的时候从高往低比较。如果在某一优先级层面上已经比较出不同，就不需要继续比较；否则进入下一级的比较。下面详细的描述这四个优先级
第一优先级为标签离修饰内容近。例如<div id="a"><div >内容</div></div>中，b的位置就比a离文字更近，当选择#a和.b的时候，.b的优先级更高
第二优先级为!important相关的优先，顺序为!important用户，!important作者，作者，用户，浏览器。其中用户是阅读网页的人，作者是写网页代码的人，浏览器指浏览器的默认样式。在浏览网页的时候我们可以发现，对于未定义过CSS字体大小的网页，可以通过点击浏览器上面的字体大小改变字体，这就是用户高于浏览器的例子。而定义过CSS字体大小的网页，则无法通过浏览器上面的字体大小改变字体，这就是作者高于用户的例子。
第三为选择器级别的优先。选择器有四种，按照优先级排列为：行内样式()，id选择器(#name{})，class选择器(.name{})，标签选择器(div{})。在进行比较的时候，先比较最高位的数量，如果相同，比较低位的数量，直到得出结果。如果所有位的数量均相同，进入第四优先级的比较。
第四为选择器为CSS代码的位置。加入CSS的方法有四种：
行内样式：<div >
嵌入式：<style type="text/css">p{color:red;)</style>
外部链接式：<link href="/blog_article/sty.css" rel="stylesheet" type="text/css" />
导入式：<style type="text/css">@import url("/blog_article/sty2.css");</style>
在前三级优先级均相同的情况下，它们的位置哪个靠下，哪个优先级高。由于行内样式在第三级优先级最高，所以不可能出现行内样式和其它样式进入第四级pk的情况，因此在第四级的比较中是进行嵌入式，外部链接式，导入式的位置比较。先将外部链接式和导入式的代码排列在文档内，然后就可以比较单条语句的顺序了。
注意：1、语句可以位于页面的任何位置，总是靠下的优先
2、对于一个<style>标签，要么写入嵌入样式，要么写入导入样式。
下面给出一些实例来描述以上四个优先级之间的关系
第一和第二的比较
<style type="text/css">
#a{color:blue!important;}
#b{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>
b离修饰内容更近，虽然a有!important，还是不能覆盖，显示红色
第二和第三的比较
<style type="text/css">
#a{color:blue!important;}
div #a{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>
div #a中有一个标签选择，一个id选择；a中只有一个id选择，但由于使用了!important所以优先级变高，显示蓝色。
第一和第三的比较
<style type="text/css">
#b{color:blue;}
#out #a{color:red;}
</style>
<body>
<div id="out"><div id="a"><p id="b">文字</p></div></div>
虽然下面的id选择符更多，但是b离内容更近，所以是蓝色
第一和第三的比较-行内样式的优先级问题
<style type="text/css">
.c3{color:blue;}
</style>
<body>
<div id="a" ><p id="b" >文字</p></div>
在外层div使用了行内样式，但CSS选择器选择的是更靠近内容的class，所以是蓝色。如果选择器选择.c2，类选择优先级不如行内选择，就显示为红色
附加内容：内嵌代码修饰的位置
<style type="text/css">
#b{color:blue;}
</style>
<body>
<div id="out"><div id="a"><font color="red"><p id="b">文字</p></font></div></div>
这里虽然有行内样式，但其修饰位置比b更加靠外，所以是蓝色
font修饰的到底是哪个呢？font其实也可以看做一个标签
<style type="text/css">
font{color:blue;}
</style>
<body>
<div id="out"><div id="a"><font color="red"><p id="b">文字</p></font></div></div>
这时候显示为蓝色。而选择#a的时候就会显示红色了。选择#b的时候则显然是蓝色。这说明内嵌标签的修饰位置在它两端的标签之间，而内嵌标签的修饰词汇的优先级比标签选择（参考第三级优先）更弱。
本文链接
一、对CSS和页面布局的理解
1. 首先在如何写CSS之前，要先了解页面的整个布局结构，例如：主页面内容、站点导航(主菜单)、子菜单、搜索框、功能区、页脚，清楚了页面的结构，才能更好的去设计CSS样式。 2. 样式表优先级：外部<内部<内联。有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。 3. 在编写样式表之前一定要注意CSS文档的编码类型一定要和HTML文档的字符集类型一致。 4. 网站一般采取HTML结构与样式分离的纯CSS布局形式，所以采取外部样式表导入的方法。样式表按区块分为几个不同的CSS文件，是为了使结构更加清晰，也是为了站点的访问及维护更加容易。 5. 先创建一个全局的CSS文件来定义例如body，a，p，form，input这些标签统一的规则，具体的还可以把文字，边框，链接，宽高都具体定义多个样式、。之后再为布局中各个部分的样式创建各自的CSS文件。 6. 选择器的优先级：标签（各个标签，如：a{..}）<类（以"."开头，定义一类标签，如.top{..}）<Id（以“#”开头，定义单一标签，如：#ppp{..}）。
注意在同一组属性设置中标有“!important”规则的优先级最大。 7. 群选择器：定义多个标签的样式规则(标签间用逗号隔开)。 例如：p,form,ul,li{...;...;...;}； 派生选择器：给一个元素里的子元素定义样式。 ①用不同规则定义不同内容块的样式， 例如：#globalnav a:link或者 #subnav a:link或者#content a:link； ②用不同规则定义相同元素的不同样式， 例如：#content p和#footer p分别定义#content和#footer中p的样式。
二、需要注意的一些样式用法
1. float: none || left || right;
在层布局中经常用到的一个属性，可以left/right浮动任何元素:图片、段落、div、标题、表格、列表等等，使用float属性，必须给这个浮动元素定义一个宽度。
2. clear：none || left || right || both;
不允许有浮动元素，有时可以利用clear:both;来解决浮动超出的问题达到布局效果。
3. display: block || none || inline;
设置或检索对象是否及如何显示， block:默认值，显示； none:层内容不可见，不保留层所占据的物理空间； inline:层内容不可见，但保留层所占据的物理空间。 visibility: inherit || visible || hidden;设置或检索是否显示对象。 inherit:默认值，继承父对象的可见性； visible:对象可视，hidden:对象隐藏。 与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。
4. border : border-width || border-style || border-color;
设置对象的边框样式。 当你指定了边框颜色( border-color )和边框宽度( border-widtd )时，你必须同时指定边框样式( border-style )，否则边框不会被呈现。 border-width : medium | thin | thick | length；设置对象边框的宽度。 border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset；设置对象边框的样式。 border-color : color；设置对象边框的颜色。 border-collapse: collapse;可以使表格无边框。
5. magin x x x x(检索或设置对象四边的外补丁); padding x x x x(检索或设置对象四边的内补丁); 如果提供全部(x x x x)四个参数值，将按顺时针的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。 也可以单方向进行设置： magin-top/-right/-bottom/-left； padding-top/-right/-bottom/-left。
引子：
在ASP.Net页面中textbox的index为1（或n）,其后的提交按钮index为2（n+1）,光标在textbox中,回车后自动焦点移动到后面的button上,会触发button的点击事件。
但在Lyncplus客户端中访问Web页面时遇到了TextBox控件回车自动完成按钮的提交事件失效的情况(应该是自动切换焦点)。
由于并且该服务端TextBox控件没有提供OnKeyPress或OnKeyDown等事件，也无法针对回车事件写后台代码来调用Button按钮的点击事件。
于是上网查找相关的介绍，最终解决了以下两个问题：
（一）、实现在TextBox控件回车事件中 执行JS代码，来控制页面元素的值。
（二）、实现在TextBox控件回车事件中 调用服务端控件的点击事件，来执行服务端C#代码，实现相关的功能。
具体实现如下：
一、注册和触发服务端TextBox控件回车事件
1.PageLoad事件代码：
{
MessageTxt.Attributes.Add("onkeypress", "EnterTextBox()");
MessageTxt.Attributes.Add("onkeydown", "EnterTextBox()");
}
2.javascript代码：
function EnterTextBox() {
if (event.keyCode == 13 && document.all["MessageTxt"].value != "") //按下了回车，并且文本框里有值
{
$("#<%=hidKeywords.ClientID%>").val($("#<%=MessageTxt.ClientID%>").val().replace(/[^\u0000-\u00FF]/g,
function ($0) {
return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
}));
}
}
</script>
二、TextBox控件回车事件中调用服务端Button控件点击事件
1.PageLoad事件代码： 同上。
{
MessageTxt.Attributes.Add("onkeypress", "EnterTextBox()");
MessageTxt.Attributes.Add("onkeydown", "EnterTextBox()");
}
2.javascript代码： 注意使用原始的dom对象获取按钮，使用Jquery获取不到。
function EnterTextBox() {
var button = document.getElementById('<%=btnSearch.ClientID%>');//获取服务端控件对应的页面对象
if (event.keyCode == 13) //按下了回车
{
button.click();
event.returnValue = false;
}
} </script>
本文链接