css笔记06：层叠样式选择器

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>元素都是黄色背景

 

 

效果图：

posted on 2015-06-30 11:01  鸿钧老祖  阅读(178)  评论(0)  编辑  收藏  举报

导航