版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
模塊10CSS選擇器10.1CSS選擇器概念10.2
標簽選擇器10.3id選擇器10.4class選擇器10.5
屬性選擇器10.6
組合選擇器10.7
超鏈接偽類選擇器10.8CSS優(yōu)先級10.9
案例：使用CSS控制超鏈接的樣式思考與練習題
10.1CSS選擇器概念
CSS通過選擇器來指定需要設(shè)置樣式的對象，例如下面這段代碼：
上述樣式代碼“div{color:red;}”中，“div”即為選擇器，表示選擇了頁面中的div元素，<div>標簽內(nèi)的文本會顯示為紅色，這是由樣式規(guī)則中的“color:red;”設(shè)定的。如果我們將樣式代碼中的選擇器“div”更換為“p”，那么顯示紅色文字的就變成<p>標簽內(nèi)的文本了。大家可以在瀏覽器中運行本例并嘗試修改代碼觀察結(jié)果的變化。
CSS選擇器的類型有很多，包括標簽選擇器、id選擇器、類選擇器、屬性選擇器等。
10.2標簽選擇器
標簽選擇器也稱作“元素選擇器”，是指用HTML標簽名稱作為選擇器，從而為頁面中由某一種標簽定義的元素指定統(tǒng)一的CSS樣式。
標簽選擇器的語法格式如下：
【例10-1】標簽選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-1所示。
圖10-1標簽選擇器的應(yīng)用
本例中，CSS選擇器為“td”，表示選擇了頁面中所有由<td>標簽定義的元素，所以在預(yù)覽結(jié)果中，我們看到每個單元格都具有相同樣式：高50像素、寬200像素、粗細1像素的實線黑色邊框。
說明：有一種特殊的選擇器類型，稱為通配符選擇器，它使用“*”表示，其作用是選擇所有元素。例如下面的代碼，使用通配符選擇器清除所有HTML標簽的默認邊距。
10.3id選擇器
id選擇器的語法格式如下：說明：id名即id屬性的值，在id名前面必須加上前綴符號“#”，否則該選擇器無效。
【例10-2】id選擇器的應(yīng)用。
本例中，先用標簽選擇器“p”選擇了所有的段落p元素，為它們設(shè)置了統(tǒng)一的字體大小樣式，再使用id選擇器“#p2”選擇了id屬性值為“p2”的元素，即為第二個段落p元素設(shè)置了紅色字體。
10.4class選擇器
class選擇器，即“類選擇器”。當要對頁面中多個相同或不相同的元素使用同一樣式時，可以為這些元素標簽設(shè)置相同的class屬性，然后CSS選擇器定義為該class名即可。class選擇器的用法與id選擇器相似，區(qū)別在于id選擇器只可選擇一個元素，而class選擇器可以選擇多個元素。
class選擇器的語法格式如下：
說明：class名即class屬性的值，在class名前面必須加上前綴符號“.”(英文點號)，否則該選擇器無效。
【例10-3】class選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-2所示。
圖10-2class選擇器的應(yīng)用
本例中，CSS樣式代碼“.red{color:red;}”表示選中class屬性值為“red”的所有元素，然后為這些元素設(shè)置了CSS屬性“color:red;”。
<body>標簽內(nèi)部包含h1、div和p這些不同的元素，但可以為這些元素定義相同的class屬性，這樣就可以同時為這些元素設(shè)置相同的CSS樣式了。從圖10-2中可以看出，
只有“盒子1”所在的<div>標簽沒有定義class屬性，所以它沒有顯示為紅色。
10.5屬性選擇器
屬性選擇器的語法格式如下：說明：屬性選擇器必須要加一對中括號“[]”，其中“屬性值”可以不指定。
【例10-4】屬性選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-3所示。
圖10-3屬性選擇器的應(yīng)用
本例中，選擇器“[target]”表示選擇使用了target屬性的所有元素，并為這些元素設(shè)置了淺藍色的背景。選擇器“[target=_blank]”表示選擇了target屬性值為“_blank”的元素，并設(shè)置文本顏色為紅色。從圖10-3中我們可以看出，“學院簡介”和“校園環(huán)境”這兩個超鏈接元素被選擇器選中并分別設(shè)置了樣式。
屬性選擇器還可以結(jié)合一些符號來表示有條件的選擇。CSS屬性選擇器語法格式及舉例見表10-1
10.6組合選擇器
10.6.1?后代選擇器后代選擇器用于選取某元素的后代元素。其語法格式如下：
【例10-5】后代選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-4所示。圖10-4后代選擇器的應(yīng)用
10.6.2?子元素選擇器
與后代選擇器相比，子元素選擇器只能選擇作為某元素直接(一級)子元素的元素。其語法格式如下：
【例10-6】子元素選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-5所示。圖10-5子元素選擇器的應(yīng)用
10.6.3?相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另一元素后的元素，且兩者有相同的父元素?！跋噜彙钡囊馑际恰熬o隨其后”。
相鄰兄弟選擇器的語法格式如下：
【例10-7】相鄰兄弟選擇器的應(yīng)用。
10.6.4?后續(xù)兄弟選擇器
后續(xù)兄弟選擇器可選取指定元素之后的所有普通兄弟元素。其語法格式如下：
【例10-8】后續(xù)兄弟選擇器的應(yīng)用。
10.6.5?交集選擇器
交集選擇器由標簽選擇器和class選擇器或id選擇器組合在一起使用，取兩種選擇器所選范圍的交集。
交集選擇器的語法格式如下：
【例10-9】交集選擇器的應(yīng)用。
上述代碼在瀏覽器中的預(yù)覽效果如圖10-6所示。圖10-6交集選擇器的應(yīng)用
10.6.6?分組選擇器
當頁面中有多個元素都設(shè)置了相同的樣式，我們可以通過分組將這些元素的選擇器寫到一起，這樣就可以得到更簡潔的樣式表。
分組選擇器的語法格式如下：
【例10-10】分組選擇器的應(yīng)用。
10.7超鏈接偽類選擇器
在CSS中，有兩種特殊的選擇器類型：偽類選擇器和偽元素選擇器。偽類選擇器用于元素處于某種狀態(tài)時為其添加對應(yīng)的樣式，例如：“:hover”用于設(shè)置鼠標懸停在某元素上時元素所呈現(xiàn)的樣式；偽元素選擇器用于創(chuàng)建一些不在DOM文檔樹中的元素，并為其添加樣式，例如下面的示例。
上述CSS代碼中，“:before”用來在p元素之前添加文本，并為這些文本添加紅色字體樣式，在瀏覽器中顯示內(nèi)容為：“添加的文本，這是段落?！?，雖然用戶可以在瀏覽器中看到添加的文本，但是它實際上并不在DOM文檔樹中。
CSS的偽類和偽元素有很多，本書選擇其中最常用的超鏈接偽類做介紹。通過超鏈接偽類可以設(shè)置不同鏈接狀態(tài)的樣式，超鏈接標簽<a>的偽類有4種，對應(yīng)4種狀態(tài)，具體如表10-2所示。
【例10-11】超鏈接偽類選擇器的應(yīng)用。
10.8CSS優(yōu)先級
定義CSS樣式時，經(jīng)常會在一個元素上應(yīng)用多個樣式規(guī)則，如果這些樣式規(guī)則中定義了相同的樣式，那么以哪個樣式為準呢？這就是CSS優(yōu)先級的問題。
【例10-12】CSS優(yōu)先級示例1。
例10-12中，CSS代碼中的3個選擇器p、#p1、red都選擇了段落p，并分別設(shè)置了不同文本顏色，那么p元素內(nèi)的文本究竟是什么顏色呢？大家到瀏覽器中運行便知結(jié)果，
文本顯示為藍色，可見此處id選擇器的優(yōu)先級最高。
接下來，對代碼稍作修改，刪掉<p>標簽內(nèi)的id屬性：
<pclass="red">我究竟是什么顏色？</p>
這時，文本顯示為紅色，由此可知class選擇器的優(yōu)先級高于標簽選擇器。
【例10-13】CSS優(yōu)先級示例2。
段落1標簽<p>同時定義了id屬性和行內(nèi)樣式，例10-12中優(yōu)先級最高的id選擇器和行內(nèi)樣式進行比較，哪個優(yōu)先級高？結(jié)論是行內(nèi)樣式的優(yōu)先級高于id選擇器，所以段
落1文本顯示為紫色。
段落2標簽<p>同時應(yīng)用了class樣式red和yellow，.red和.yellow同為類樣式，哪個優(yōu)先級高呢？結(jié)論是同一級別的樣式，定義時排在最后的優(yōu)先級最高，所以段落2文本顯示為黃色。
以上是CSS優(yōu)先級的基本規(guī)則，在實際應(yīng)用中可能更復(fù)雜一些，這就需要大家多實踐，在實踐中理解并掌握CSS優(yōu)先級的規(guī)則。
10.9案例：使用CSS控制超鏈接的樣式
【案例描述】本案例實現(xiàn)了多個頁面間的超鏈接，并使用偽類選擇器設(shè)置了超鏈接的樣式。案例源文件參考“模塊10案例”?！究己酥R點】CSS各種選擇器的應(yīng)用
【練習目標】
(1)熟悉CSS的基本語法。
(2)掌握標簽選擇器的應(yīng)用。
(3)掌握分組選擇器的應(yīng)用。
(4)掌握超鏈接偽類選擇器的應(yīng)用。
(5)熟悉其他各類選擇器。
【案例源代碼】
(1)“html.html”文件源代碼如下：
(2)“css.html”文件和“javascript.html”文件源代碼與“html.html”文件源代碼相似，請查看配套素材和源碼。
(3)3個頁面共用的CSS樣式“style.css”文件源代碼如下：
【運行結(jié)果】
源代碼運行結(jié)果如圖10-7所示。圖10-7頁面運行結(jié)果
【案例分析】
本案例通過導(dǎo)航實現(xiàn)了3個頁面間的鏈接。超鏈接樣式設(shè)置：通過選擇器“a”對超鏈接4個狀態(tài)的樣式進行了統(tǒng)一設(shè)置，然后通過偽類選擇器“a:hover”設(shè)置了鼠標經(jīng)
過超鏈接這一狀態(tài)的樣式，其中“text-decoration”樣式屬性表示文本的修飾，屬性值“overlineunderline”表示同時設(shè)置上劃線和下劃線。
思考與練習題
一、選擇題1.下列選項中不是CSS選擇器類型的是()。A.標簽選擇器
B.id選擇器C.class選擇器
D.行內(nèi)選擇器2.id選擇器的id名前面必須要加的前綴符號是()。A.#
B.*C.+
D.~
3.類選擇器名使用的是()屬性的值。
A.id
B.class
C.style
D.title
4.下列選擇器中不屬于后代選擇器的是()。
A.pspan
B.p>span
C.p~span
D.p+span
5.CSS代碼“h1,h2,#green{color:green;}”的選擇器類型是()。
A.后代選擇器
B.交集選擇器
C.分組選擇器
D.相鄰兄弟選擇器
二、填空題
1.class選擇器也稱為
。
2.選擇頁面中設(shè)置了title屬性的所有元素，選擇器的寫法是
。
3.有如下一段代碼
4.超鏈接的4個偽類選擇器分別是
、
、
、
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 煤礦災(zāi)害防治課程設(shè)計
- 2025版知識產(chǎn)權(quán)運營居間合同最高收費標準與許可協(xié)議2篇
- 給水排水水力學課程設(shè)計
- 線上工作坊課程設(shè)計
- 生態(tài)農(nóng)場管理課程設(shè)計
- 2025湖北省安全員B證考試題庫及答案
- 研學課程設(shè)計提綱
- 窗簾加工課程設(shè)計
- 液氯課程設(shè)計
- 2025黑龍江省建筑安全員B證考試題庫
- 急救、生命支持類醫(yī)學裝備調(diào)配制度與流程
- 《中小企業(yè)應(yīng)收賬款管理研究》文獻述評加國外現(xiàn)狀
- 江蘇省無錫市2022-2023學年上學期初中學業(yè)水平調(diào)研測試九年級英語期末試題
- 超聲內(nèi)鏡穿刺護理課件
- 國家開放大學電大考試《心理學》課程形成性考核冊試題及答案（1-4）最全
- 緬懷偉大領(lǐng)袖,爭做時代新人征文
- 九年級數(shù)學《解直角三角形》說課課件
- 教練技術(shù)工具之：平衡輪課件
- 國家開放大學電大本科《管理案例分析》2023年期末試題及答案(試卷號：1304)
- 戰(zhàn)略目標新設(shè)計-BLM
- 科技創(chuàng)業(yè)項目計劃書
評論
0/150
提交評論