css基础

id选择器：

index.html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6    <link href="MyCss1.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9      <p id="pid">hello css <a href="http://www.jikexueyuan">学院</a></p>
10      <div id="divid"> <!-- 使用的最多 -->
11         这是第一个div
12      </div>
13 </body>
14 </html>

MyCss.css

1 #pid a{
2     color:blue;
3 }
4 #divid{
5     color:red;
6 }

类选择器：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6    <link href="MyCss2.css" type="text/css" rel="stylesheet">
 7 </head>
 8 <body>
 9      <p class="pclass">这是一个class效果<a href="http:www.baidu.com">百度</a></p>
10      <div class="divclass">
11         Hello DivClass
12      </div>
13 </body>
14 </html>

1 .pclass a{
2     color:red;
3 }
4 .divclass{
5     color:blue;
6 }

属性选择器：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6    <style type="text/css">
 7       [title]{
 8          color:blue;
 9       }
10       [title=te]{
11          color:red;
12       }
13    </style>
14 </head>
15 <body>
16      <p title="t">属性选择器</p>
17      <p title="te">属性和值选择器</p>
18 </body>
19 </html>