1.
(1)HTML文件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>选择器</title> 6 <link rel="stylesheet" type="text/css" href="style.css"/> 7 </head> 8 9 <body> 10 <p> Specificity is determined by now specific the selector is. 11 <span id="specific"> A specific selector wins</span> 12 over a <span> more general one </span>. 13 </p> 14 15 <p> 16 Order isn't important until there are one or more elememts of the same specificty referring to the same elememt.In 17 which case,<span> the last one wins</span> 18 </p> 19 20 </body> 21 </html>
（2）CSS文件
@charset "utf-8"; /* CSS Document */ body { font:Verdana, Geneva, sans-serif; } span#specific { background:pink; } span { background:red; } span { background:yellow; }
这里CSS文件中有两个span{}，这两个选择器针对性都是1，因此后面的那个优先适用，这导致后面连个<span>元素都是黄色背景
效果图：
