一.什么是選擇器?
每一條CSS樣式聲明(定義)由兩部分組成,形成如下:
選擇器{樣式;}
在{}之前的部分就是"選擇器","選擇器"指明了{}中的"樣式"的作用對象,也就是“樣式”作用于網頁中的哪些元素.
二.標簽選擇器
標簽選擇器其實就是html代碼中的標簽。如<html>,<body>,<p>,<img>等
三.類選擇器
類選擇器在CSS樣式編碼中是最常用到的。
P:1.英文原點開頭 2.其中類選擇器可以任意起名
語法: .類選擇器名稱{CSS樣式代碼};
四.ID選擇器
在很多方面,ID選擇器都類似于類選擇符,但也有一些重要的區別:
1.為標簽設置id= "ID名稱",而不是class= "類名稱".
2.ID選擇符的前面是#號,而不是英文原點"."。
ID選擇器和類選擇器的區別.
相同點: 可以應用于任何元素
不同點:
1.ID選擇器只能在文檔中使用一次。在一個HTML文檔中,ID選擇器只能使用一次,而且僅一次,而類選擇器可以使用多次.
2.可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式,但只可以使用類選擇器的方法實現,ID選擇器是不可以的.(個人理解.ID選擇器就像是一張身份證,你領了之后,其他人就不能再領,有且只有一個~)
五.子選擇器
子選擇器用于選擇指定標簽元素的第一代子元素。
通俗理解:就是指,為這一類的子類,僅子類添加指定樣式.
語法舉例:.food>milk{border:1px solid red};?
六.包含(后代)選擇器
包含選擇器,即加入空格,用于選擇指定標簽元素下的后背元素.
語法舉例:.food span{color:red};這行代碼會使food下所有span標簽的字體都變成紅色
后代選擇器和子選擇器的卻別:
1.自選擇器僅是指它的直接后代.后代選擇器作用于它所有后代
2.后代選擇器通過空格來進行選擇,子選擇器通過">"進行選擇
七.通用選擇器
通用選擇器是功能最強大的選擇器,它使用一個(*)號指定,它的作用是匹配html中所有的元素.
八.偽類選擇符
偽類選擇符允許給html不存在的標簽(標簽的某種狀態)設置樣式。
語法舉例:a:hove{color:red};
關于偽選擇符:到目前為止,可以兼容所有瀏覽器的"偽類選擇符"就是a標簽上使用:hover.其實:hover可以放在任意的標簽上,比如說 p:hover.但是它們的兼容性也是很不好的.
九.分組選擇符
為html中多個標簽元素設置同一個樣式,可以使用分組選擇符(,)。
語法舉例:h1,span{color:red};相當于 h1{color:red;} span{color:red;}