CSS基本选择器

 

 1 <!DOCTYPE html>
 2 <html lang="ch-zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--试试互换代码7行与8行的顺序对比一下效果 对于同一个标签，谁举例更近谁的样式效果生效-->
 7     <style>p {color: blue}</style>
 8     <link rel="stylesheet" href="css02.css">
 9 </head>
10 <body>
11     <p>只缘身在此山中</p>
12     <p>林深不知处</p>
13 
14     <a id="t1" href="http://www.taobao.com">跳转到淘宝</a>
15     <br>
16     <a id="t2" href="http://www.baidu.com">跳转到百度</a>
17     <br>
18 
19     <ul>
20         <li><p id="ln_jz"  class="c1"><b>加粗字体 锦州</b></p></li>
21         <li><p id="ln_fx" class="c1" style="color: chartreuse"><b>加粗字体 阜新</b></p></li>
22         <li><p id="ln_sy" class="c1"><b>加粗字体 沈阳</b></p></li>
23         <li><p id="ln_dl" class="c1"><b>加粗字体 大连</b></p></li>
24         <li><p id="ln_hld" class="c1"><b>加粗字体 葫芦岛</b></p></li>
25         <li><p id="ln_pj" class="c1"><b>加粗字体 盘锦</b></p></li>
26         <li><p id="ln_as" class="c1"><b>加粗字体 鞍山</b></p></li>
27         <li><p id="ln_bx" class="c1"><b>加粗字体 本溪</b></p></li>
28         <li><p id="ln_cy" class="c1" style="color: deepskyblue"><b>加粗字体 朝阳</b></p></li>
29     </ul>
30 
31 
32 </body>
33 </html>

 

 

css02.css

 1 /*标签选择器*/
 2 p {
 3     color: yellow;
 4     font-size: 16px
 5 }
 6 
 7 /*类选择器*/
 8 .c1 {
 9     color: crimson;
10 }
11 
12 
13 /*ID选择器*/
14 #t1 {
15     color: green;
16 }
17 #t2 {
18     color: darkmagenta;
19 }
20 
21 
22 #ln_as {
23     color: yellow;
24 }
25 #ln_bx {
26     color: yellow;
27 }
28 #ln_cy {
29     color: yellow;
30 }

 

posted @ 2020-04-10 09:25  CherryYang  阅读(109)  评论(0)    收藏  举报