每一條css樣式宣告(定義)由兩部分組成,形式如下:
選擇器在{}之前的部分就是「選擇器」,「選擇器」指明了{}中的「樣式」的作用物件,也就是「樣式」作用於網頁中的哪些元素。
標籤選擇器其實就是html**中的標籤。如、、、、
p上面的css樣式**的作用:為p標籤設定12px字型大小,行間距設定1.6em的樣式。
語法:
.類選器名稱注意:
1、英文圓點開頭
2、其中類選器名稱可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合適的標籤把要修飾的內容標記起來,如下:
膽小如鼠第二步:使用class="類選擇器名稱"為標籤設定乙個類,如下:
class="stress">膽小如鼠第三步:設定類選器css樣式,如下:
.stress/*類前面要加入乙個英文圓點*/在很多方面,id選擇器都類似於類選擇符,但也有一些重要的區別:
1、為標籤設定id="id名稱",而不是class="類名稱"。
2、id選擇符的前面是井號
(#)號,而不是英文圓點
(.)。
相同點:可以應用於任何元素
不同點:
1、id選擇器只能在文件中使用一次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。我們可以為乙個元素同時設多個樣式,但只可以用類選擇器的方法實現,id選擇器是不可以的(不能使用 id 詞列表)。
下面的**是正確的(完整**見右側**編輯器)
.stress上面**的作用是為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px。.bigsize
到了三年級下學期時,我們班上了一節公開課...
下面的**是不正確的(完整**見右側**編輯器)
#stressid上面**不可以實現為「三年級」三個文字設定文字顏色為紅色並且字型大小為25px的作用。#bigsizeid
到了三年級下學期時,我們班上了一節公開課...
還有乙個比較有用的選擇器子選擇器,即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側**編輯器中的**:
.food>li/*新增邊框樣式(粗細為1px, 顏色為紅色的實線)*/包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素。如右側**編輯器中的**:
.first span這行**會使第一段文字內容中的「膽小如鼠」字型顏色變為紅色。
後代選擇器通過
空格來進行選擇,而子選擇器是通過「
>
」進行選擇。
總結:>作用於元素的
第一代後代,
空格作用於元素的
所有後代。
通用選擇器是功能最強大的選擇器,它使用乙個(*)號指定,它的作用是匹配html中所有標籤元素,如下使用下面**使用html中任意標籤元素字型顏色全部設定為紅色:
*給html中乙個標籤元素的滑鼠滑過的狀態來設定字型顏色:
a:hover上面一行**就是為 a 標籤滑鼠滑過的狀態設定字型顏色變紅。這樣就會使第一段文字內容中的「膽小如鼠」文字加入滑鼠滑過字型顏色變為紅色特效。
關於偽選擇符:
關於偽類選擇符,到目前為止,可以相容所有瀏鑑器的「偽類選擇符」就是 a 標籤上使用 :hover 了(其實偽類選擇符還有很多,尤其是 css3 中,但是因為不能相容所有瀏覽器,本教程只是講了這一種最常用的)。其實 :hover 可以放在任意的標籤上,比如說 p:hover,但是它們的相容性也是很不好的,所以現在比較常用的還是 a:hover 的組合。
8.10:分組選擇符
當你想為html中多個標籤元素設定同乙個樣式時,可以使用分組選擇符(,),如下**為右側**編輯器中的h1、span標籤同時設定字型顏色為紅色:
h1,span它相當於下面兩行**:
h1span
css選擇器 CSS選擇器總結
在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3,發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...