CSS入門(二)CSS選擇器
前言
至於為什麼要講這個!後面學習JQuery的時候是肯定需要的!我還不如在這裡先給大家打個基礎!
方法
1.基本選擇器
我們知道,當我們為HTML標籤新增樣式的時候,首先想到的是我要往哪個地方加啊!如果有多個相同的標籤我該怎麼辦啊!這些都要靠JS選擇器來進行實現!
1)標籤選擇器
標籤名{樣式名1:樣式值1;……}
作用:會將當前網頁內的所有該標籤增加相同的樣式
/*宣告一個段落p樣式,所有p標籤均適用*/ p { color: red; }
2)id選擇器:
#標籤的id屬性值{樣式名1:樣式值1;……}
作用:給某個指定的標籤新增指定的樣式
例如:HTML標籤中有一個id為test的p標籤
<p id="test">我的段落</p>
則使用id選擇器新增該標籤樣式為:(特別的:html中的id唯一表示一個標籤,原則上不可以指定多個;若多個則均新增該樣式)
#test {
color: red;
}
3)類選擇器:
.類選擇器名{樣式名1:樣式值1;……}
作用:給不同的標籤新增相同的樣式
例如:HTML標籤有一個class屬性為test的p標籤和b標籤
<p class="test">我的段落</p>
<b class="test">加粗</b>
則使用類選擇器新增樣式為:
.test {
color: red;
}
以上三種為最基本的選擇器:
標籤選擇器一般用於一類標籤的樣式;id選擇器一般用於一個標籤的樣式;類選擇器用於一類標籤的樣式(即使它們的標籤是不同的)
2.其他選擇器
1)同時定義多個選擇器樣式,使用逗號分隔
例如:定義P標籤、類屬性為test的標籤樣式
.test,p { color: red; }
2)定義子標籤樣式
語法:父標籤 子標籤 {樣式內容}
例如:div標籤下的p標籤新增樣式
<div><p>我的段落</p></div>
div p {
color: red;
}
3)屬性選擇器
我們知道,有些時候我們需要標籤元素的屬性來定義該元素,如name屬性
語法:標籤名[屬性名=屬性值]
例如:name屬性為test的div標籤新增樣式
<div name="test">我的段落</div>
div[name="test"] {
color: red;
}
另外,還有其他特殊的選擇器沒有說明,我這裡只是列舉其中一些常用的選擇器,初期使用足夠了!
其他特殊的選擇器我們講解JQuery的時候在詳細說明!
寫後感:
其實,說白了CSS選擇器的核心就是定位HTML中的元素位置,這一點尤為重要,尤其是在JQuery中將更加明顯!