同一元素應用多個class的優先順序的測試
使用多個class,以空格分開,如:<span class="a2 a1">
效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title></title><br /><style type="text/css"><br />.a1 {<br />font-size: 9pt;<br />color: #FF0000;<br />}<br />.a2 {<br />font-size: 18pt;<br />color: #0000FF;<br />}<br /></style><br /></head></p><p><body><br /><style type="text/css"><br /><br />.a1 {<br /><br />font-size: 9pt;<br /><br />color: #FF0000;<br /><br />}<br /><br />.a2 {<br /><br />font-size: 18pt;<br /><br />color: #0000FF;<br /><br />}<br /><br /></style><br /><br /><br /><br /><span class="a1">a1</span><br /><br /><span class="a2">a2</span><br /><br /><span class="a2 a1">a2 a1</span><br /><br /><span class="a1 a2">a1 a2</span><br /><br /></body><br /></html>
調換一下a1和a2的順序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title></title><br /><style type="text/css"><br />.a2 {<br />font-size: 18pt;<br />color: #0000FF;<br />}<br />.a1 {<br />font-size: 9pt;<br />color: #FF0000;<br />}<br /></style><br /></head></p><p><body><br /><style type="text/css"><br /><br />.a2 {<br /><br />font-size: 18pt;<br /><br />color: #0000FF;<br /><br />}<br /><br />.a1 {<br /><br />font-size: 9pt;<br /><br />color: #FF0000;<br /><br />}<br /><br /><br /><br /></style><br /><br /><br /><br /><span class="a1">a1</span><br /><br /><span class="a2">a2</span><br /><br /><span class="a2 a1">a2 a1</span><br /><br /><span class="a1 a2">a1 a2</span><br /><br /></body><br /></html>
加上!important看看效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title></title><br /><style type="text/css"><br />.a2 {<br />font-size: 18pt;<br />color: #0000FF!important;<br />}<br />.a1 {<br />font-size: 9pt;<br />color: #FF0000;<br />}<br /></style><br /></head></p><p><body><br /><style type="text/css"><br /><br />.a2 {<br /><br />font-size: 18pt;<br /><br />color: #0000FF!important;<br /><br />}<br /><br />.a1 {<br /><br />font-size: 9pt;<br /><br />color: #FF0000;<br /><br />}<br /><br /><br /><br /></style><br /><br /><br /><br /><span class="a1">a1</span><br /><br /><span class="a2">a2</span><br /><br /><span class="a2 a1">a2 a1</span><br /><br /><span class="a1 a2">a1 a2</span><br /><br /></body><br /></html>
結論:若同時應用多個class,後定義的優先(即近者優先),加上!important最優先!