當我們需要對多個不同的標籤下的相同的屬性賦同樣的值時，我們就可以使用高階選擇器
1、後代選擇器和子代選擇器
後代選擇器和子代選擇器是為了實現對某標籤下的不同層級便簽內容屬性的精準賦值。
例項如下：
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
>
/* 後代選擇器 */
/* 將li標籤下的所有strong標籤裡的內容改為紅色，即大兒子、二兒子、孫子為紅色 */
li strong
/* 子代選擇器 */
/* 只將li標籤的下一級為strong標籤裡的內容改為綠色，即只將大兒子和二兒子改為綠色 */
li>strong
style
>
head
>
>
>
>
大兒子 strong
>
>
二兒子strong
>
li>
>
>
三兒子 >
孫子strong
>
em>
li>
body
>
html
>
**注意：**大兒子與二兒子沒有變紅的原因是兩個選擇器的優先順序相同，後面的子代選擇器覆蓋了後代選擇器的紅色。
2、並集選擇器
即：將要賦同樣值的不同標籤合併來寫
例項如下：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* span
h1h2 */
/* 並集選擇器 */
span,h1,h2
style
>
head
>
>
>
>
這是spanspan
>
>
這是h1h1
>
>
這是h2h2
>
div>
body
>
html
>
3、交集選擇器
交集選擇器可以精準的實現不同標籤下的相同類名的分別賦值
例項如下：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
h1.choose
p.choose
style
>
head
>
>
class
="choose"
>
變綠p>
class
="choose"
>
變紅h1
>
body
>
html
>
4、屬性選擇器
屬性選擇器是實現對具備某個屬性的標籤裡面的樣式修改
例項如下：
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
/* 具備某個屬性 href */
[href]
/* 滿足屬性=值 */
/* [href="google.cn"] */
/* ^= 以...開頭 */
[href^="w"]
/* $= 以...結尾 */
[href$="n"]
/* *= 包含... */
/* [href*="h"]*/
style
>
head
>
>
href
="">
>
href
="www.aiqiyi.com"
>
愛奇藝a
>
href
="google.cn"
>
谷歌a>
body
>
html
>
HTML5基礎知識點（二）
html5基礎知識點 1.標籤 table 外框 caption 設定 標籤 thead 頭部 tbody 身體 tr 行 td 單元格 th 表頭 2.屬性 border 邊框 width 設定 的寬度 height 設定 的高度 align 設定 的對齊方式 left center right ...
HTML5知識點總結（三）
字型及文字屬性 邊距和填充 邊框屬性 列表屬性 背景屬性 背景的漸變 陰影屬性 字型屬性 type text css font 設定字型是所有樣式 font family 設定字型型別 font size 設定字型大小 font weight 設定字型粗細 color 設定字型顏色 font fam...
第1章HTML5基礎 知識點
1.html5基本結構和w3c標準 html hyper text markup language 超文字標記語言 w3c world wide web consortium 全球資訊網聯盟 成立於1994年，web技術領域最權威和具影響力的國際中立性技術標準機構 w3c標準包括 結構化標準語言 h...