CSS的選擇器

時間 2019-11-18

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

1、css介紹css

　　css：層疊樣式表，用於美化網頁；使用css，能夠將html頁面的內容和樣式分開，讓結構更加健壯，就像一棵樹，枝幹分明，才能茁壯成長。開發中，每每html和css（外部樣式表）文件分開，再經過link引用css文件，這樣，瀏覽器就會加載css，按照css文件中的樣式渲染html文件。html

　　css語法：一、選擇器二、聲明（帶圖） #選擇器就是html中的標籤瀏覽器

　　css引入方式：（1）外部樣式表（重要）、（2）內聯樣式、（3）行內樣式表ide

（1）外部樣式表分連接式和導入式連接式（經常使用）：佈局

 1 <!-- 有一個test.css文件
 2 
 3 而後在html文件中經過link標籤引入： -->
 4 <!DOCTYPE html>
 5 <html lang="en">
 6 <head>
 7     <meta charset="UTF-8">
 8     <!-- 在html文件中經過link標籤引入 -->
 9     <link rel="stylesheet" href="test.css">
10 </head>
11 <body>
12     <p>這是一個標籤</p>
13 </body>
14 </html>

連接式

（2）（3）內聯樣式和行內樣式表性能

<!-- 內聯樣式  經過style標籤 -->
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>這是一個p標籤！</p>
    </body>
</html>


<!-- 行內樣式 -->
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
    </head>
    <body>
        <p style="color: blue;">這是一個p標籤！</p>
    </body>
</html>

內聯樣式和行內樣式

2、選擇器字體

（1）基本選擇器spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         /*標籤選擇器p 將全部p標籤字體顏色設爲紅色*/
 8         p{
 9             color: red;
10         }
11         
12         /*ID選擇器 將id="a"的元素字體設爲紅色*/
13         #a{
14             color: red;
15         }
16 
17         /*類選擇器 將全部樣式類含c1的元素字體顏色設爲紅色*/
18         .c1{
19             color: red;
20         }
21 
22         /*通用選擇器 用*選擇全部元素*/
23         *{
24             color: green;
25         }
26     </style>
27 </head>
28 <body>
29     <p id="a">這是一份標籤</p>
30     <p class="c1">這也是一份標籤</p>
31 </body>
32 </html>

基本選擇器

（2）組合選擇器3d

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>高級選擇器</title>
 6     <style type="text/css">
 7         
 8         /*後代選擇器 在css中使用很是頻繁*/
 9         /*div  p{
10             color: red;
11         }
12 
13         div div p{
14             color: yellow;
15         }
16 
17         .container div p{
18             color: green;
19         }*/
20         /*子代選擇器*/
21 
22         .container>p{
23             color: yellowgreen;
24         }
25 
26         /*交集選擇器*/
27 
28         h3{
29             width:300px;
30             color: red;
31         }
32 
33         .active{
34             font-size: 30px;
35         }
36 
37         h3.active{
38             background-color: yellow;
39         }
40 
41         /*並集選擇器 （組合）  設置多個標籤中的統同樣式*/
42         a,h4{
43             color: #666;
44             font-size: 20px;
45             text-decoration: none;
46         }
47         
48         /* *   通配符選擇器   */
49         /* 性能有點差*/
50         html,body,div,p,span,a{
51 
52             color: red;
53         
54         }
55 
56 
57     </style>
58 </head>
59 <body>
60 
61     <div class="container">
62         <p>我是另外一個段落</p>
63         <div>
64             <p>我是個段落</p>
65             <a href="#">luffy</a>
66         </div>
67         <p>我是另一個段落2</p>
68 
69         <ul>
70             <li class="item">
71                 <h3 class="active">我是一個H3</h3>
72                 <h4>我是一個h4標題</h4>
73             </li>
74             <li>    
75 
76                 <h4>我是一個h4標題</h4>
77                 <a href="#">BAT</a>
78             </li>
79         </ul>
80     </div>
81     
82 </body>
83 </html>

組合選擇器

（3）屬性選擇器code

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>屬性選擇器</title>
 6     <style type="text/css">
 7         label[for]{
 8             color: red;
 9             font-size: 20px;
10         }
11 
12         label[for='pwd']{
13             color: yellow;
14         }
15         
16         /*以...開頭*/
17         label[for^='vip']{
18             font-size: 30px;
19         }
20         /*以...結尾*/
21         label[for$='p2']{
22             font-size: 20px;
23         }
24         /*包含...*/
25         label[for*='ser']{
26             color: green;
27         }
28 
29         input[type='text']{
30             background-color: purple;
31         }
32 
33     </style>
34 </head>
35 <body>
36     
37     <!-- 屬性選擇器 一般在 表單控件中 使用比較頻繁-->
38     <div class="box">
39         <form action="">
40             <label for="user">用戶名：</label>
41             <input type="text" name="" id="user">
42             <label for="pwd">密碼：</label>
43             <label for="vip1">vip1</label>
44             <label for="vip2">vip2</label>
45             <label for="user2">用戶名2：</label>
46             <label for="user3">用戶名3：</label>
47         </form>
48     </div>
49 </body>
50 </html>

屬性選擇器

（4）僞類選擇器

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>僞類選擇器</title>
  6     <style type="text/css">
  7 
  8         /*'愛恨原則' love hate*/
  9         /*沒有被訪問的a標籤的樣式*/
 10         /*.box ul li.item1 a:link{
 11             
 12             color: #666;
 13         }
 14         /*訪問事後的a標籤的樣式*/
 15         /*.box ul li.item2 a:visited{
 16             
 17             color: yellow;
 18         }*/
 19         /*鼠標懸停時a標籤的樣式*/
 20         /*.box ul li.item3 a:hover{
 21             
 22             color: green;
 23         }*/
 24         /*鼠標點住的時候a標籤的樣式*/
 25         /*.box ul li.item4 a:active{
 26             
 27             color: yellowgreen;
 28         }*/
 29         
 30         /*選中第一個元素*/
 31         /*div ul li:first-child{
 32             font-size: 20px;
 33             color: red;
 34         }*/
 35         /*選中最後一個元素*/
 36         /*div ul li:last-child{
 37             font-size: 20px;
 38             color: yellow;
 39         }*/
 40         
 41         /*選中當前指定的元素  數值從1開始*/
 42         div ul li:nth-child(3){
 43             font-size: 30px;
 44             color: purple;
 45         }
 46         
 47         /*n表示選中全部 從0開始的  0的時候表示沒有選中*/
 48         /*div ul li:nth-child(n){
 49             font-size: 40px;
 50             color: red;
 51         }*/
 52         
 53         /*偶數*/
 54         /*div ul li:nth-child(2n){
 55             font-size: 50px;
 56             color: gold;
 57         }*/
 58         /*奇數*/
 59         /*div ul li:nth-child(2n-1){
 60             font-size: 50px;
 61             color: yellow;
 62         }*/
 63         /*隔幾換色  隔行換色*/
 64         
 65         /*div ul li:nth-child(5n+1){
 66             font-size: 50px;
 67             color: red;
 68         }*/
 69 
 70 
 71     </style>
 72 </head>
 73 <body>
 74 
 75     <div class="box">
 76         <ul>
 77             <li class="item1">
 78                 1
 79                 <a href="#">張三</a>
 80             </li>
 81             <li class="item2">
 82                 2
 83                 <a href="#">李四</a>
 84             </li>
 85             <li class="item3">
 86                 3
 87                 <a href="#">王八</a>
 88             </li>
 89             <li class="item4">
 90                 4
 91                 <a href="#">趙六</a>
 92             </li>
 93             <li class="item4">
 94                 5
 95                 <a href="#">趙六</a>
 96             </li>
 97             <li class="item4">
 98                 6
 99                 <a href="#">趙六</a>
100             </li>
101             <li class="item4">
102                 7
103                 <a href="#">趙六</a>
104             </li>
105             <li class="item4">
106                 8
107                 <a href="#">趙六</a>
108             </li>
109             <li class="item4">
110                 9
111                 <a href="#">趙六</a>
112             </li>
113             <li class="item4">
114                 10
115                 <a href="#">趙六</a>
116             </li>
117         </ul>
118     </div>
119     
120 </body>
121 </html>

僞類選擇器

（5）爲元素選擇器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>僞元素選擇器</title>
 6 
 7     <style type="text/css">
 8         
 9         /*設置第一個首字母的樣式*/
10         p:first-letter{
11             color: red;
12             font-size: 30px;
13 
14         }
15         
16         /* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
17         p:before{
18             content:'alex';
19         }
20         
21         
22         /*在....以後 使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
23         p:after{
24             content:'&';
25             color: red;
26             font-size: 40px;
27         }
28     </style>
29 </head>
30 <body>
31 
32     <p>
33         我是一個段落
34 
35     </p>
36     
37 </body>
38 </html>