CSS基础(part2)--CSS选择器
學習筆記，僅供參考，有錯必糾
文章目錄
- CSS
- CSS語法
- CSS簡單屬性
- CSS注釋
- CSS選擇器
- 通配符選擇器
- ID選擇器
- 類選擇器
- CSS復合選擇器
- 標簽指定式選擇器(既...又...)
- 后代選擇器(包含選擇器)
- 并集選擇器
- 子元素選擇器
- 屬性選擇器
CSS
CSS語法
由上圖可知，CSS語法由選擇器, 屬性聲明, 花括號, 冒號, 分號組成，且css對換行和空格不敏感。
比如：
p { color: green; /*設置前景色，也就字體的顏色為綠色*/ background-color: red;/*設置背景色為紅色*/ }CSS簡單屬性
- 常用屬性
| width | 設置寬度,單位px像素 |
| height | 高度 |
| color | 前景色(文字顏色) |
| background-color | 背景色 |
| font-size | 字體大小 |
- 舉個例子
頁面：
CSS注釋
語法：
/*單行注釋*/ /* 多行注釋 */注意，注釋不能嵌套。
CSS選擇器
通配符選擇器
通配符選擇器用*星號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素，其基本語法格式如下：
* {屬性1: 屬性值1;屬性2: 屬性值2; }例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>* {margin: 0; /*外邊距*/padding: 0; /*內邊距*/color: green;}</style> </head> <body><h1>通配符選擇器</h1><p>歡迎光臨！</p><span>OK!</span> </body> </html>頁面：
- 注意事項
通配符的穿透能力很強，優先級高于繼承的樣式，會覆蓋繼承的樣式。
ID選擇器
ID選擇器，可以幫助我們選擇當前頁面中唯一的id值的標簽，也就是根據標簽的id屬性值進行選取，進而設置樣式。ID選擇器的符號用#井號表示
如果我們的頁面中有兩個p標簽，我想設置上面一個標簽的像素為30px，下面一個p標簽的像素為10px，那么我們可以通過設置標簽id+標簽選擇器的方式實現，例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>#p1 {font-size: 30px;}#p2 {font-size: 10px;}</style> </head> <body><h1>ID選擇器</h1><p id="p1">我是第1個p標簽</p><p id="p2">我是第2個p標簽</p> </body> </html>頁面：
- ID選擇器的命名規范
- 只允許出現字母(大小寫嚴格區分)，數字，下劃線
- 只允許以字母開頭
- 命名沒有長度限制，但不能太長
- 不允許出現標簽名
類選擇器
類選擇器，是對HTML標簽中class屬性進行選擇。css類選擇器的選擇符為.，例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>.Web {color: green;font-size: 20px;}</style> </head> <body><h1>類選擇器</h1><p class="Web">我是第1個p標簽</p><p>我是第2個p標簽</p><p class="Web">我是第3個p標簽</p><ul><li>小黃</li><li class="Web">小白</li><li>小黑</li></ul> </body> </html>頁面：
標簽可以的class屬性可以包含多個值，這些值在class標簽中用空格隔開：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>選擇器</title><style>.Web {color: green;font-size: 20px;}.data {background-color: yellow;}</style> </head> <body><h1>類選擇器</h1><p class="Web">我是第1個p標簽</p><p class="data">我是第2個p標簽</p><ul><li>小黃</li><li class="Web data">小白</li><li>小黑</li></ul> </body> </html>頁面：
- ID選擇器和類選擇器的區別
相同的class屬性值，可以在HTML頁面中出現多次，而ID屬性值，則只能在HTML頁面中出現一次；
一個class屬性可以有多個值，也就是說一個標簽可以有多個class值；
建議大家可以多實用類選擇器(不是我建議的)。
CSS復合選擇器
復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，詳情見下面的知識點。
標簽指定式選擇器(既…又…)
標簽指定式選擇器又稱交集選擇器，由兩個選擇器構成，其中第一個為標記選擇器，第二個為class選擇器或者id選擇器，兩個選擇器之間不能有空格，例如：
- 舉個例子
頁面：
后代選擇器(包含選擇器)
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標記寫在前面，內層標記寫在后面，中間用空格分隔。當標記發生嵌套時，內層標記就成為外層標記的后代，例如：
- 舉個例子
頁面：
并集選擇器
并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器(包括標記選擇器、class類選擇器、id選擇器等)，都可以作為并集選擇器的一部分，如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式，例如：
- 舉個例子
頁面：
子元素選擇器
子元素選擇器，是讓選擇器只能選擇兒子輩的元素，而不會選擇孫子輩的元素。例如：
h1>strong { color: red; }- 舉個例子
頁面：
屬性選擇器
- 舉個例子
頁面：
總結
以上是生活随笔為你收集整理的CSS基础(part2)--CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 腾达 FS395 无线路由器自动获取IP
- 下一篇： CSS基础(part3)--伪类及伪元素