同一元素应用多个class的优先级的测试！

本文链接：https://blog.csdn.net/shanzimedia/article/details/54783647

使用多个class，以空格分开，如：效果：

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css">.a1 { font-size: 9pt; color: #FF0000;}.a2 { font-size: 18pt; color: #0000FF;}</style></head><body><style type="text/css"> .a1 { font-size: 9pt; color: #FF0000; } .a2 { font-size: 18pt; color: #0000FF; } </style> a2 a1 a1 a2 </body></html>
[ 可先修改部分代码再运行查看效果 ]

调换一下a1和a2的顺序

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css">.a2 { font-size: 18pt; color: #0000FF;}.a1 { font-size: 9pt; color: #FF0000;}</style></head><body><style type="text/css"> .a2 { font-size: 18pt; color: #0000FF; } .a1 { font-size: 9pt; color: #FF0000; } </style> a2 a1 a1 a2 </body></html>
[ 可先修改部分代码再运行查看效果 ]

加上!important看看效果

Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css">.a2 { font-size: 18pt; color: #0000FF!important;}.a1 { font-size: 9pt; color: #FF0000;}</style></head><body><style type="text/css"> .a2 { font-size: 18pt; color: #0000FF!important; } .a1 { font-size: 9pt; color: #FF0000; } </style> a2 a1 a1 a2 </body></html>
[ 可先修改部分代码再运行查看效果 ]

结论：若同时应用多个class，后定义的优先（即近者优先），加上!important最优先！