元素的样式Css属性，有多种方式赋值。通常来说，有以下几种方式：
- 1.继承自祖先元素
- 2.内联式(通过属性style写入样式)
- 3.通过选择器写入样式
- 3.1通过标签赋值
- 3.2通过类名赋值
- 3.3通过id赋值
- 4.通过脚本写入操作修改。
一个一个说，首先，继承自祖先元素的属性来说，只有部分属性能通过继承获得。visibility和cursor以及大部分字体属性都能继承。继承属性遵守就近原则，即以最近的祖先元素为标准如果所有祖先元素未提及该属性，则以浏览器默认样式渲染。
内联样式优先级最高，但是在html代码中夹带css样式代码的行为严格上说是不规范的，所内联样式都不推荐使用了，再往后可能会淡出大家的视线了。但是在目前内联样式优先级依然是最高的。关于内联样式的疑问也不多，需要注意的就是，属性中加入了"!important"标签后优先级高于内联样式。
通过选择器赋值的样式也很简单，通过ID选择器赋值 大于 通过类名选择器赋值 大于 通过标签名赋值。关于选择器赋值有几点要注意：
1.内嵌样式的优先级大于外联css文件，即如果某元素在内嵌css代码和外联css代码中同时被同类选择器选中，则以内嵌css代码为有效。如下：
ex.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>操作元素样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style>
.green
{
color:green;
}
</style>
<body>
<div id="content" class="blue green" >我字体是绿色的</div>
</body>
</html>style.css
.blue
{
color:blue;
}
当没有内嵌和外联的区别时候，应当是以解析时间为判断依据，后解析的会覆盖先解析的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>操作元素样式</title>
</head>
<style>
.green{ color:green;}
.blue{ color:blue;}
</style>
<body>
<h3>css()方法设置元素样式</h3>
<div class="blue green">我该是绿色还是蓝色</div>
</body>
</html>这时 .blue后解析，所以覆盖 .green。
2.当内嵌css代码和外联css代码，以同一个选择器选中时，以文档后读取为有效。分析如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>操作元素样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style>
.blue
{
color:green;
}
</style>
<body>
<div id="content" class="blue" >我字体是绿色的</div>
</body>
</html>当我们将<link>换到文档结尾处，即外联css代码后解析，所以覆盖内嵌css中的.blue，字体变成蓝色。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>操作元素样式</title>
</head>
<style>
.blue
{
color:green;
}
</style>
<body>
<div id="content" class="blue" >我字体变回蓝色了</div>
<pre name="code" class="html"> <link href="style.css" rel="stylesheet" type="text/css" />然后是脚本修改，脚本修改有两种方式，第一种是为元素添加或者修改类名，而类名的属性在已有的css代码中已经写好。第二种是通过setAttribute()方法直接修改。
对于第一种方式，修改类名通常不会有疑问，而添加类名往往会出现不同的类选择器样式代码中有对同一属性的描述，这时的渲染方式与添加类名的先后顺序并无关系。因为添加上去之后，元素是同时属于有两个类，这时的解析规则应当是上文中说过的两个同一级别的选择器的问题。在没有内嵌和外联的影响的时候，就以解析时间判断，css代码中写在后面的覆盖前面的。
第二种方式，同样以时间为判断。通常来说，js代码会在页面元素全部加载完成后执行。所以通常js代码修改的属性为有效。两次js代码修改同一个元素，则以代码执行时间判断，同理。
本文只讨论css优先级，不讨论浏览器支持及浏览器默认解析规则。
以上！如有疑问，请评论留言。
<link href="style.css" rel="stylesheet" type="text/css" />
3321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
