css 之优先策略

CSS 之优先策略Html代码<html><head><title>testCSS</title><styletype="text/css">h2{color:red;}h2{color:green;}h3{color:red;}h5{color:green;}</style><linkrel="stylesheet"type="text/css"href="a.css"/></head><body><h1style="color:red;color:green">1.绿色，当内联的方式定义color:red;color:green，以后面的为准，后面会把前面的覆盖</h1><h2>2.绿色，当内联的方式定义两次颜色，以后面的为准，后面会把前面的覆盖</h2><h3style="color:green">3.当以内联和内部样式表的方式定义，内联优先于内部样式表</h3><h4style="color:green">4.当以内联和内部样式表的方式定义，内联优先于内部样式表,与内部样式表存放的位置无关</h3><h5>5.当内部样式表和外部样式表同时定义时，与内联样式与外部样式表定义的顺序有关，以后面为准，后面会把前面的覆盖</h5></body><styletype="text/css">h4{color:red;}</style></html>执行结果：

Html代码<html><head><title>testCSS</title><styletype="text/css">h1{color:green;}#h1id{color:blue;}.h1class{color:yellow;}#h2idh2{color:blue;}.h2classh2{color:yellow}divh2{color:red;}</style></head><body>一、内联>>id选择器>>类选择器>>标签选择器>>：表示优先的意思<br><h1style="color:red"id="h1id"class="h1class">1.红色内联、标签选择器、类选择器、id选择器都符合，优先内联</h1><h1style=""id="h1id"class="h1class">2.蓝色标签选择器、类选择器、id选择器都符合，优先id选择器</h1><h1style=""class="h1class">3.黄色标签选择器、类选择器都符合，优先类选择器</h1><h1style="">4.绿色最终才是标签选择器</h1>二、派生选择器依然遵守上面的规律id派生>>类派生>>标签派生<divid="h2id"class="h2class"><h2>1.蓝色</h2></div><divclass="h2class"><h2>2.黄色</h2></div><div><h2>3.红色</h2></div></body></html>