CSS簡單選擇器的學習筆記

2022-11-24 18:41:54 字數 2305 閱讀 6282

我們知道通過css定義頁面樣式的時候要用到各種各樣的選擇器,正確的使用選擇器是我們能夠正確使用css做頁面樣式的基礎。下面是我學習選擇器的一個簡易筆記,舉一些簡單的例子。

為了方便展示,我選擇在內部的style內寫css的樣式。但一般為了分離樣式方便修改,多實用外部樣式,用link標籤。

1.標籤選擇器,即通過標籤來定義樣式。

例如:下面是通過標籤p來定義了文字的顏色和位置等。

2.id選擇器,即通過標籤內的id元素來選擇相應的標籤,定義其元素。每個標籤的id一定要是獨一無二的,不同的標籤不能有相同的id。

可以定義不同的標籤不同的樣式。

例如:

下面是演示結果:

3.class選擇器,即通過元素class來選擇對應標籤,但是不同於id選擇器的是class選擇器可以是不同標籤對應相同的class。可以方便的對多個相同class的標籤定義樣式。

例如:

下面是演示結果:

4.屬性選擇器。用"[ ]"選擇相應標籤的屬性,若是有此標籤的或者“[ ]”內的標籤值是正確的,則可以定義相應標籤的樣式。

例如:下面例子定義了所有有class元素的標籤的樣式。

演示結果如下:

這個例子是隻定義有特定class值的標籤的樣式。

下面是演示結果:

這個例子是用來選擇以什麼開頭的指定屬性或者以什麼結尾的指定屬性的標籤。

比如下面的例子中的  " ^= "(匹配開頭相等的元素) 和  " $= "(匹配結尾相等的元素)  和 " *= "(匹配出現這個字串的元素,無論在中間,開頭或者結尾都可以)

下面是選擇了所有以“para”開頭的class屬性的p標籤的樣式的演示結果:

再比如用“ $= ”匹配結尾等於什麼的方式,下面只是匹配了第一個p標籤。

下面是演示結果:

下面的例子演示“ *= ”匹配

匹配了含有“a para_2”的這個字串的class元素的p標籤,即第二個p標籤。

下面是演示結果:

當然任意的選擇器都是可以相互組合的,比如下面的例子:

匹配了class元素中結尾為para_1的第一個p標籤和用id選擇器匹配的第二個p標籤。

上述的四種基本的選擇器都是可以相互組合的,之間用“,”隔開即可,這個是對多個需要定義樣式的標籤的選擇。

5.偽類

用於對於dom中連結樣式的定義.

例如下面例子:

下面是結果演示:

左邊是點選過連結之後的顏色,右邊是滑鼠放在連結上的顏色。

6.選擇器的組合(這一塊很好理解,可以自行google,就不舉例子了)

1》直接組合 ef,這樣相當於是交集,選擇的是兩個選擇器都滿足的標籤。比如:#para1[class $= "para_1"]即是選擇第一個p標籤

2》後代組合 e f,之間有空格,這樣,相當於選擇滿足e的標籤中的f標籤。比如:div p這樣就是選擇所有div標籤中的p標籤

3》親子組合e > f,這樣的組合有點類似用後代組合,但是隻能是巢狀一層的標籤才是親子標籤。

同時為一組選擇器定義樣式的方式是中間用“ , ”隔開,例子如下所示:

以上只是我新學css的一點個人總結,由於水平有限,要是有錯誤,可以隨時糾正我,不清楚的地方可以自行google。