CSS選擇器之萬用字元選擇器和多元素選擇器

2021-09-20 01:07:29 字數 1739 閱讀 4012

如果希望所有的元素都符合某一種樣式,可以使用萬用字元選擇器.

基本語法:

*
可以讓所有的html元素的外邊距和內邊距都預設為0.

寫一段html**:

hello world

用瀏覽器開啟後,效果跟下面一樣:

這個時候想讓字型距離瀏覽器的邊距為0時,就可以使用萬用字元選擇器了.

修改後的**如下:

hello world

用瀏覽器開啟後的效果如下:

可以看到字型距離瀏覽器的邊距差不多為0了.

css檔案中,組合選擇器可以是id選擇器,類選擇器,html標籤選擇器等 

例項**:

黃鶴樓送孟浩然之廣陵

故人西辭黃鶴樓

烟花三月下揚州

孤帆遠影碧空盡

唯見長江天際流

重新整理瀏覽器後顯示的效果如下:

雖然達到了效果,但是所用到的**太煩雜了,可以使用更好的辦法.

修改後的**如下:

黃鶴樓送孟浩然之廣陵

故人西辭黃鶴樓

烟花三月下揚州

孤帆遠影碧空盡

唯見長江天際流

重新整理瀏覽器,看到的效果跟上面的是一樣的.

現在想要把網頁中所有的字型顏色都變成綠色的,就只用修改一行**就可以了.

修改後的**如下:

黃鶴樓送孟浩然之廣陵

故人西辭黃鶴樓

烟花三月下揚州

孤帆遠影碧空盡

唯見長江天際流

修改後的效果如下:

現在再來修改**,在span2這個類標籤中新增乙個顏色屬性,其值為紅色的,效果會怎麼樣呢??

修改後的**如下:

黃鶴樓送孟浩然之廣陵

故人西辭黃鶴樓

烟花三月下揚州

孤帆遠影碧空盡

唯見長江天際流

重新整理瀏覽器後,顯示的效果如下:

可以看到span3標籤裡的屬性覆蓋了span1裡的顏色設定.

關於組合選擇器的多元素選擇器的說明:

1.為了**簡潔,可以把各個選擇器的共同的樣式寫在一起,做成多元素選擇器

2.如果樣式發生了衝突,以寫在後面的樣式為準.

CSS選擇器之屬性選擇器 關係選擇器

e代表標籤名,如p,div等等 att表示該標籤定義了的乙個屬性名,如class id等,value為該屬性的屬性值,該屬性值為包含字首 value的子字串。若去掉e,則表示匹配滿足條件的任意元素 基本原理同上,不過value表示該屬性值應包含以value為字尾的子字串 基本原理同上,但value表...

萬用字元選擇器

萬用字元選擇器 作用描述 選擇所有元素。例子 內容 html view plain copy h1 我是標題 h1 p 我是段落 p ahref 我是超連結 a 需求 把,標籤中的內容變成紅色。方法一 id選擇器 html view plain copy html head meta charset...

JQuery選擇器之CSS選擇器

語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素,即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...