CSS--選擇器 - caofangsheng－IT工程師數位筆記本

文章出處

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>