CSS入門介紹（二）CSS選擇器
css選擇器
什麼是選擇器？
選擇器是你構造好網頁的結構，需要給這些結構賦予樣式，這時候就需要用到選擇器，利用選擇器將元素與樣式一一對應；兩者的對應關係可以是一對一，一對多，多對一。
選擇器的分類：
這裡我只展示幾種比較常見的型別，
1. 標籤選擇器
給同一種標籤新增樣式，例如：
標籤名{
屬性名:屬性值；
}
<style type="text/css"> p{ color: turquoise; } div{ width: 50px; height: 50px; background-color: #CCCCCC; } </style> </head> <body> <p>段落1</p> <div>文字1</div> <p>段落2</p> <div>文字2</div> <p>段落3</p> </body>
效果圖如下：
2. 通用選擇器(萬用字元)
給所有的標籤新增樣式。
*{
屬性名:屬性值；
}
注意：通用選擇器是先遍歷網頁中的所有標籤，然後再給這些標籤新增樣式，因此這個選擇器的效能十分的低，不推薦使用，一般只會在測試的時候，用於css的初始化。
3. 類選擇器(class)
給同一個類(同一個群體)的標籤新增樣式，前提是這些標籤的類名是一樣的。
.類名{
屬性名:屬性值；
}
<style type="text/css"> .aa{ color: red; } </style> </head> <body> <p class="aa">段落1</p> <div class="aa">文字1</div> <p>段落2</p> <div>文字2</div> <p class="aa">段落3</p> </body>
效果圖如下：
值得注意的是:一個類名可以給多個標籤，一個標籤也可以擁有多個類名，多個類名之間用空格( )隔開。
4. ID選擇器
給ID名相同的標籤新增樣式
#ID名{
屬性名:屬性值；
}
關於id，在寫程式碼的時候儘量少用id，因為id佔兩個字元，而class只佔一個字元。
注意：一個標籤最好只用一個ID名，一個ID只能給一個標籤。
5. 後代選擇器
選擇的是某一個元素的後代元素，父級與子級之間用空格( )隔開
父級 子級{
屬性名:屬性值；
}
<style type="text/css"> .ab p{ color: red; } </style> </head> <body> <p class="aa">段落1</p> <div class="ab"> <p>段落2</p> <div>文字2</div> <p class="aa">段落3</p> </div> </body>
效果圖如下：
6. 子代選擇器
選擇的是某一個元素的直接後代元素，父級與子級之間用">"隔開
父級>子級{
屬性名:屬性值；
}
<style type="text/css"> .ab>div{ color: red; } .ab>p{ color: blue; } </style> </head> <body> <p class="aa">段落1</p> <div class="ab"> <p>段落2</p> <div>文字2</div> <p class="aa">段落3</p> </div> </body>
效果圖如下：
7. 相鄰兄弟選擇器
選擇的是緊挨著該元素後面的一個元素。
元素名+兄弟名{
屬性名:屬性值；
}
<style type="text/css"> .aa+div{ color: red; } .aa~span{ color: blue; } </style> </head> <body> <p class="aa">段落1</p> <div class="bb">文字1</div> <span>段落2</span> <div>文字2</div> <span class="cc">段落3</span> </body>
8. 通用兄弟選擇器
選擇的是該元素後面的所有的某一類兄弟。
元素名~兄弟名{
屬性名:屬性值；
}
<style type="text/css"> .aa+div{ color: red; } .aa~span{ color: blue; } </style> </head> <body> <p class="aa">段落1</p> <div class="bb">文字1</div> <span>段落2</span> <div>文字2</div> <span class="cc">段落3</span> </body>
相鄰兄弟選擇器與通用兄弟選擇器的效果圖如下：
