您好,登錄后才能下訂單哦!
這篇文章主要介紹了css選擇器的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
語法結(jié)構(gòu)
Id選擇器
格式
#id :#+元素的id;id是區(qū)分大小寫。
示例
#title1 {background-color:Blue;border-width:thick;}
Class 類選擇器
格式
.ClassName :.+Class類的名稱;類名是區(qū)分大小寫。
示例
.postTitle {background-color: Green;}
元素(標(biāo)簽)名稱選擇器
格式
元素名稱:元素的名稱不區(qū)分大小寫。
示例
h3 {background-color:Green;}
復(fù)合選擇器
格式
元素名稱1,元素名稱2,#id,.ClassName :可以根據(jù)元素的名稱、id、類名,使符合條件的元素共同擁有樣式;各選擇器條件要以分號(,)隔開。
示例
h3 , #subid , .subclass {background-color:Green;}
層次選擇器
格式
父選擇器 子選擇器 :滿足父選擇器下的子選擇器條件;兩者中間用空格隔開。
示例
① 父選擇器為元素
div input{background-color:Green} /* 表示div下的input子元素 */
② 父選擇器可以為類、Id選擇器,子選擇器也可以。
.showInfo_tabel tr{height:20px;} /* 表示table的class為showInfo_tabel時,下面的tr元素height屬性為20px */
偽類選擇器
格式
其他選擇器 偽類選擇器
說明
行為選擇器是以 : 開頭,后面跟著偽類名稱。主要有5個(CSS1和2):
①a:link 選擇所有未被訪問的鏈接
②a:visited 選擇所有已被訪問的鏈接
③a:active 選擇活動鏈接
④input:hover 鼠標(biāo)懸停上方的元素
⑤input:focus 獲取到焦點的元素
示例
1.若不想a鏈接在訪問后改變元素,可以把a標(biāo)簽的未被訪問和已被訪問設(shè)為同一種顏色
a :link,:visited{color:Blue;}
2.元素的鼠標(biāo)懸停(進(jìn)入):如"登錄"按鈕的變色。
.btn_login:hover {background-color: #218fd5;}
屬性選擇器
格式
元素選擇器[屬性名稱="屬性值"]
說明
1) 可在其他選擇器上,再添加對屬性的匹配。
2) 若要元素同時滿足多個屬性,可在屬性選擇器后面進(jìn)行追加:元素選擇器[屬性名稱1="屬性值"][屬性名稱2="屬性值"]
示例
1) 匹配只讀的textarea標(biāo)簽
textarea[readonly="readonly"]{ background-color: #EBEBEB;}
2) 指定類名以及多屬性
.readOnlyBg input[type="text"][readonly="readonly"]{ background-color: #EBEBEB;}
樣式調(diào)用方式
樣式可以存放在一個專門存放樣式的文件里(外部樣式表)、HTML頁面的<head></head>里(內(nèi)部樣式表)、元素的Style屬性里(內(nèi)聯(lián)樣式)。
外部樣式表
存放方式
存放在專門的一個樣式表里。以css為后綴的文件。
引用方式
在HTML頁面的<head></head>節(jié)點里,添加<link />標(biāo)簽:
<head> <link href="../Styles/Site.css" rel="stylesheet" type="text/css" /> </head>
應(yīng)用場景
多個page頁面共享樣式,如:論壇帖子的排版。
內(nèi)部樣表
存放方式
在HTML頁面的<head></head>節(jié)點里,添加<style type="text/css" ></style> 腳本。
<head> <title>page標(biāo)題</title> <style type="text/css"> input{background-color:Green } </style> </head>
使用場景
單個page特有的樣式。
內(nèi)聯(lián)樣式
存放方式
元素的Style屬性里。
<input type="text" style="background-color:Blue;" value="input1"/>
樣式的優(yōu)先級
當(dāng)一個元素附加許多級樣式時,比如:外聯(lián)樣式包含此元素、內(nèi)聯(lián)樣式也包含此元素等,樣式采用的是并集方式。
若有交集的元素,將按以下的情況決定采用哪個樣式屬性:
非同級引用
外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式都設(shè)置了此元素的某個相同樣式屬性。
優(yōu)先級對比
內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表
對相同的樣式屬性,其值是獲取優(yōu)先級最高的。
示例
<head> <style> #testinput{width:300px} </style> </head> <body > <input type="text" id="testinput" style="background-color:Blue;width:120px;" value="input1"/> </body>
input標(biāo)簽的width屬性,實際為120px;
同級引用
在外部樣式表 或 內(nèi)部樣式表里 多個樣式選擇器包含了此元素。
優(yōu)先級對比
外部樣式表、內(nèi)部樣式表 情況下:Id選擇器 > class 類選擇器 >元素選擇器。
內(nèi)聯(lián)樣式情況下:采用后面同屬性樣式的值。
示例
<head> <style> input{background-color:Yellow;} #testinput{background-color:Red;} .showblue{background-color:Blue;} </style> </head> <body > <input type="text" id="testinput" class="showblue" value="input1" style="width:1000px;width:100px"/> </body>
顯示圖片:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“css選擇器的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。