每天学一点，每天积累一点，进步就不止一点点！PS：好记性不如烂笔头，学会总结，学会思考～～～ ----要飞翔，必须靠自己！

灰太狼的梦想

好记性不如烂笔头，学会总结，学会思考～～～

CSS--选择器

1.派生选择器

派生选择器，允许你根据文档的上下文关系，来确定某个标签的样式。

 1 <DOCTYPE html>
 2 <html>
 3     <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 4     <head>
 5         <title>HTML框架</title>
 6         <style type="text/css">
 7             li strong 
 8             {
 9                 font-size:20px;
10                 color:#FF9999;
11                 font-style:italic;
12             }
13         </style>
14     </head>
15     <body>
16         <P><strong>我是Strong标签里面的内容</strong></p>
17         <ol>
18             <li><strong>我是Li标签里面的Strong标签里面的内容</strong></li>
19         </ol>
20     </body>
21 </html>
派生选择器

2.ID选择器

ID选择器，可以为标有特定id的HTML元素指定特定的样式。

ID选择器，以“#”来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。

 1 <DOCTYPE html>
 2 <html>
 3     <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 4     <head>
 5         <title>HTML框架</title>
 6          <style type="text/css">
 7            方法一；
 8            div #myPage
 9             {
10               color:#FF9999;
11               font-size:30px;
12               font-style:italic;
13             }
14             方法二：
15             #myPage
16             {
17               color:#FF9999;
18               font-size:30px;
19               font-style:italic;
20             }
21             
22         </style> 
23     </head>
24     <body>
25         <div>
26             <p id="myPage">我是段落标签，在div标签里面的<p>   
27         </div>
28     </body>
29 </html>

3.CSS类选择器

在CSS中，类选择器以一个点号显示：

.center{text-align:center}

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样，class 也可被用作派生选择器：

 1 <DOCTYPE html>
 2 <html>
 3     <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 4     <head>
 5         <title>HTML框架</title>
 6          <style type="text/css">
 7             .myClass
 8             {
 9               background-color:#DD6666;
10             }
11             
12             div .myP
13             {
14               background-color:#CCCCCC;
15             }
16             
17             
18         </style> 
19     </head>
20     <body>
21         <div class="myClass">
22           武汉软件工程职业学院
23         </div>
24         <div>
25             <p class="myP">我是段落标签的内容</p>
26         </div>
27     </body>
28 </html>
Class选择器

类名第一个字符是数字的情况下，在火狐浏览器中:

 

4,CSS属性选择器

对带有指定属性的HTML元素设置样式，可以为指定属性的HTML元素设置样式，而不限于class和id属性

 1 <DOCTYPE html>
 2 <html>
 3     <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 4     <head>
 5         <title>HTML框架</title>
 6          <style type="text/css">
 7           [class]
 8           {
 9           background-color:#FF9999;
10           }
11           
12             
13             
14         </style> 
15     </head>
16     <body>
17         <div class="myClass">
18           武汉软件工程职业学院
19         </div>
20         <div>
21             <p class="11myP">我是段落标签的内容</p>
22         </div>
23     </body>
24 </html>
CSS属性选择器

属性和值选择器：

 1 <DOCTYPE html>
 2 <html>
 3     <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 4     <head>
 5         <title>HTML框架</title>
 6          <style type="text/css">
 7           [class]
 8           {
 9           background-color:#FF9999;
10           }
11           [class=myClass]
12           {
13             border:3px solid #000000;
14           }
15           
16           
17           
18             
19             
20         </style> 
21     </head>
22     <body>
23         <div class="myClass">
24           武汉软件工程职业学院
25         </div>
26         <div>
27             <p class="11myP">我是段落标签的内容</p>
28         </div>
29     </body>
30 </html>

效果图：

属性和值选择器--多个值

 1 <DOCTYPE html>
 2 <html>
 3     <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
 4     <head>
 5         <title>HTML框架</title>
 6          <style type="text/css">
 7         
 8           
 9           [name~=hello]
10           {
11             border:5px solid red;
12           }
13           
14             
15             
16         </style> 
17     </head>
18     <body>
19         <div  class="myClass"  name="hello world" >
20           武汉软件工程职业学院 
21         </div>
22         <div>
23             <p class="11myP" name="CSS hello" >我是段落标签的内容</p>
24         </div>
25     </body>
26 </html>
属性值选择器，多个值

效果图：

 

posted @ 2015-07-04 22:46  灰太狼的梦想  阅读(730)  评论(0)  编辑  收藏  举报