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

 

 

效果图:

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

你可能感兴趣的:(css)