選擇器
選擇器(selector),會(huì)告訴瀏覽器:網(wǎng)頁 上的哪些元素需要設(shè)置什么樣的樣式。
CSS 元素選擇器
元素選擇器(標(biāo)簽選擇器),可以根據(jù)標(biāo) 簽的名字來從頁面中選取指定的元素。
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
CSS 分組
群組選擇器,可以同時(shí)使用多個(gè)選擇器, 多個(gè)選擇器將被同時(shí)應(yīng)用指定的樣式。
h2, p {color:gray;}
CSS 類選擇器
類選擇器,可以根據(jù)元素的class屬性值選 取元素。
.important {color:red;}
CSS ID 選擇器
ID選擇器,可以根據(jù)元素的id屬性值選取 元素。
\#intro {font-weight:bold;}
css通用選擇器
通用選擇器,可以同時(shí)選中頁面中的所有 元素。
語法:
*{ }
標(biāo)簽之間的關(guān)系
祖先元素
直接或間接包含后代元素的元素。
后代元素
直接或間接被祖先元素包含的元素。
父元素
直接包含子元素的元素。
子元素
直接被父元素包含的元素。
兄弟元素
擁有相同父元素的元素。
CSS 屬性選擇器
屬性選擇器可以挑選帶有特殊屬性的標(biāo)簽。
語法:
[屬性名]
[屬性名="屬性值"]
[屬性名~="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"]
[屬性名$="屬性值"]
[屬性名*="屬性值"]
CSS 后代選擇器
后代選擇器可以根據(jù)標(biāo)簽的關(guān)系,為處在 元素內(nèi)部的代元素設(shè)置樣式。
語法:
祖先元素 后代元素 后代元素 { }
比如p strong 會(huì)選中頁面中所有的p元素 內(nèi)的strong元素。
h1 em {color:red;}
CSS 子元素選擇器
子元素選擇器可以給另一個(gè)元素的子元素 設(shè)置樣式。
語法:
父元素 > 子元素{}
比如body > h1將選擇body子標(biāo)簽中的所 有h1標(biāo)簽。
h1 > strong {color:red;}
CSS 相鄰兄弟選擇器
h1 + p {margin-top:50px;}
CSS 偽類
有時(shí)候,你需要選擇本身沒有標(biāo)簽,但是 仍然易于識(shí)別的網(wǎng)頁部位,比如段落首行 或鼠標(biāo)滑過的連接。CSS為他們提供一些選 擇器:偽類和偽元素。
a:link {color: #FF0000} /* 未訪問的鏈接 /
a:visited {color: #00FF00} / 已訪問的鏈接 /
a:hover {color: #FF00FF} / 鼠標(biāo)移動(dòng)到鏈接上 /
a:active {color: #0000FF} / 選定的鏈接 */
CSS 偽元素 (Pseudo-elements)
獲取焦點(diǎn)
:focus
指定元素前
:before
指定元素后
:after
選中的元素
::selection
其他子元素選擇器
:first-child
選擇第一個(gè)子標(biāo)簽
:last-child
選擇最后一個(gè)子標(biāo)簽
:nth-child
選擇指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
選擇指定類型的子元素
css兄弟選擇器
除了根據(jù)祖先父子關(guān)系,還可以根據(jù)兄弟 關(guān)系查找元素。
語法:
查找后邊一個(gè)兄弟元素
兄弟元素 + 兄弟元素{}
查找后邊所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
h1 + p {margin-top:50px;}
css:not(選擇器){}
否定偽類可以幫助我們選擇不是其他東西 的某件東西。
語法:
比如p:not(.hello)表示選擇所有的p元素但 是class為hello的除外。
css繼承
就像父親的財(cái)產(chǎn)會(huì)遺傳給兒子一樣,在CSS中祖先元素的樣式 同樣也會(huì)被子元素繼承。
繼承是指應(yīng)用在一個(gè)標(biāo)簽上的那些CSS樣式會(huì)同時(shí)被應(yīng)用到其 內(nèi)嵌標(biāo)簽上。
比如為父元素設(shè)置了字體顏色,子元素也會(huì)應(yīng)用上相同的顏色。
當(dāng)然并不是所有的樣式都會(huì)被繼承,這一點(diǎn)我們講到具體樣式 時(shí),再去討論。
css選擇器的權(quán)重
不同的選擇器有不同的權(quán)重值:
內(nèi)聯(lián)樣式:權(quán)重是 1000
id選擇器:權(quán)重是 100
類、屬性、偽類選擇器:權(quán)重是 10
元素選擇器:權(quán)重是 1
通配符:權(quán)重是 0
計(jì)算權(quán)重需要將一個(gè)樣式的全部選擇器相加,比如上邊的body h1的權(quán)重是20,h1的權(quán)重是10,所以第一個(gè)選擇器設(shè)置的樣 式會(huì)優(yōu)先顯示。