網(wǎng)頁設計與制作（活頁式） 課件 情景8-2 CSS選擇器

網(wǎng)頁設計與制作CSS選擇器授課教師：吳紀磊HTMLcsscssJavaScript目錄CONTENTS12學習目標知識講解學習目標01學習目標學習目標01掌握簡單選擇器學習目標02掌握組合器選擇器學習目標03掌握偽類選擇器學習目標04掌握偽元素選擇器學習目標05掌握屬性選擇器02知識點講解1、CSS選擇器的分類

CSS選擇器用于“查找”（或選?。┮O置樣式的HTML元素?？梢詫SS選擇器分為五類：偽元素選擇器選取元素的一部分并設置其樣式偽類選擇器根據(jù)特定狀態(tài)選取元素屬性選擇器根據(jù)屬性或?qū)傩灾祦磉x取元素簡單選擇器根據(jù)標簽名稱、id、類來選取元素組合器選擇器根據(jù)它們之間的特定關(guān)系來選取元素2、簡單選擇器元素選擇器01元素選擇器是最簡單的選擇器，通常是HTML的某個標簽元素，如p、div、a等，甚至可以是HTML本身。語法格式如下：標簽名{屬性名：屬性值；…}如下示例，頁面上的所有p標簽元素都將居中對齊，并帶有紅色文本顏色：p{text-align:center;color:red;}2、簡單選擇器id選擇器02id選擇器使用HTML元素的id屬性來選擇特定元素。因為元素的id在頁面中是唯一的，因此id選擇器用于選擇一個唯一的元素。注意，要選擇具有特定id的元素，請寫一個＃號，后跟該元素的id。語法格式如下：#id{屬性名：屬性值；…}如下示例，該CSS規(guī)則將應用于id="para1"的HTML元素：#para1{text-align:center;color:red;}2、簡單選擇器類選擇器03類選擇器選擇有特定class屬性的HTML元素。注意，在寫類選擇器的時候，以.字符開頭，后面跟類名。語法格式如下：.類名{屬性名：屬性值；…}如下示例，所有帶有class="center"的HTML元素將為紅色且居中對齊：.center{text-align:center;color:red;}2、簡單選擇器CSS通用選擇器04通用選擇器（*）選擇頁面上的所有的HTML元素，通常用于頁面的初始化。語法格式如下：*{屬性名：屬性值；…}如下示例，下面的CSS規(guī)則會影響頁面上的每個HTML元素：*{text-align:center;color:blue;}3、組合器選擇器

CSS中有四種不同的組合器：1后代選擇器（空格）2子選擇器（>）3相鄰兄弟選擇器（+）4通用兄弟選擇器（~）3、組合器選擇器元素選擇器01后代選擇器匹配屬于指定元素后代的所有元素。語法格式如下：選擇器1選擇器2{屬性名：屬性值；…}如下示例，選擇<div>元素內(nèi)的所有<p>元素：divp{background-color:yellow;}3、組合器選擇器子選擇器02子選擇器匹配屬于指定元素子元素的所有元素。語法格式如下：選擇器1>選擇器2{屬性名：屬性值；…}如下示例，選擇屬于<div>元素子元素的所有<p>元素：div>p{background-color:yellow;}3、組合器選擇器相鄰兄弟選擇器03相鄰兄弟選擇器匹配所有作為指定元素的相鄰同級的元素。兄弟（同級）元素必須具有相同的父元素，“相鄰”的意思是“緊隨其后”。語法格式如下：選擇器1+選擇器2{屬性名：屬性值；…}如下示例，選擇緊隨<div>元素之后的所有<p>元素：div+p{background-color:yellow;}3、組合器選擇器通用兄弟選擇器04通用兄弟選擇器匹配屬于指定元素的同級元素后面的所有元素。語法格式如下：選擇器1~選擇器2{屬性名：屬性值；…}如下示例，選擇屬于<div>元素的同級元素后面的所有<p>元素：div~p{background-color:yellow;}4、偽類選擇器

偽類用于定義元素的特殊狀態(tài)。例如，它可以用于設置鼠標懸停在元素上時的樣式、為已訪問和未訪問鏈接設置不同的樣式、設置元素獲得焦點時的樣式。

（1）超鏈接的四種狀態(tài)

a標簽有4種偽類（即對應四種狀態(tài)），如下：:link------“鏈接”：超鏈接點擊之前:visited------“訪問過的”：鏈接被訪問過之后:hover------“懸?！保菏髽朔诺綐撕炆系臅r候:active------“激活”：鼠標點擊標簽，但是不松手時4、偽類選擇器

如下示例，設置a標簽的狀態(tài)：/*未訪問的鏈接*/a:link{color:#FF0000;}/*已訪問的鏈接*/a:visited{color:#00FF00;}/*鼠標懸停鏈接*//*鼠標懸停鏈接*/a:hover{color:#FF00FF;}/*已選擇的鏈接*/a:active{color:#0000FF;}

注意：a:hover必須在CSS定義中的a:link和a:visited之后，才能生效！a:active必須在CSS定義中的a:hover之后才能生效，偽類名稱對大小寫不敏感。5、偽元素選擇器

CSS偽元素用于設置元素指定部分的樣式，它可用于設置元素的首字母、首行的樣式，在元素的內(nèi)容之前或之后插入內(nèi)容。選擇器例子描述::afterp::after在每個<p>元素之后插入內(nèi)容。::beforep::before在每個<p>元素之前插入內(nèi)容。::first-letterp::first-letter選擇每個<p>元素的首字母。::first-linep::first-line選擇每個<p>元素的首行。::selectionp::selection選擇用戶選擇的元素部分。6、屬性選擇器

為帶有特定屬性或?qū)傩灾档腍TML元素設置樣式。

CSS的屬性選擇器如下表所示：選擇器例子描述[attribute][target]選擇帶有target屬性的所有元素。[attribute=value][target=_blank]選擇帶有target="_blank"屬性的所有元素。[attribute~=value][title~=flower]選擇帶有包含"flower"一詞的title屬性的所有元素。[attribute|=value][lang|=en]選擇帶有以"en"開頭的lang屬性的所有元素。[attribute^=value]a[href^="https"]選擇其href屬性值以"https"開頭的每個<a>元素。[attribute$=value]a[href$=".pdf"]選擇其href屬性值以".pdf"結(jié)尾的每個<a>元素。[attribute*=value]a[href*="hello"]選擇其href屬性值包含子串"hello"的每個<a>元素。7、分組選擇器

分組選擇器選取所有具有相同樣式定義的HTML元素，各個選擇器以逗號隔開。

語法格式如下：選擇器1,選擇器2,選擇器3…{屬性名：屬性值；…}

如下示例，h1、h2和p元素采用相同的樣式：h1,h2,p{text-align:center;color:red;}03練一練【練一練】04小結(jié)小結(jié)本節(jié)內(nèi)容講解了CSS選擇器的五種類型，