css選擇器
選擇器(selector)录淡,會告訴瀏覽器:網(wǎng)頁上的那些元素需要設(shè)置什么樣的樣式垂蜗。
比如:p這個選擇器就表示選擇頁面中的所有的p元素,在選擇器之后所設(shè)置的樣式會應(yīng)用到所有的p元素上.
元素選擇器
元素選擇器(標(biāo)簽選擇器),可以根據(jù)標(biāo)簽的名字來從頁面中選取指定的元素你弦。
語法:
????????????標(biāo)簽名{? }
比如p則會選中頁面中的所有p標(biāo)簽弃衍,h1會 選中頁面中的所有h1標(biāo)簽呀非。
類選擇器
類選擇器,可以根據(jù)元素的class屬性值選取素镜盯。
語法:
? ? ? ? .className{? }
比如.hello會選中頁面所有class屬性為hello的元素
ID選擇器
ID選擇器岸裙,可以根據(jù)元素的id屬性值選取元素。
語法:
? ? ? ? #id{? ?}
?比如#box會選中頁面中id屬性值為box的 元素速缆,和class屬性不同降允,id屬性是不能重復(fù)的。
復(fù)合選擇器(交集選擇器)
?復(fù)合選擇器艺糜,可以同時使用多個選擇器剧董,? 這樣可以選擇同時滿足多個選擇器的元素。
語法:
? ? ? ? -選擇器1選擇器2{? ?}
例如div.box1 會選中頁面中具有box1這個class的div元素
群組選擇器(并集選擇器)
群組選擇器破停,可以同時使用多個選擇器翅楼, 多個選擇器將被同時應(yīng)用指定的樣式。
語法:
? ? ? ? 選擇器1真慢,選擇器2毅臊, 選擇器3{ }
比如p,.hello, #box會同時選中頁面中p元素黑界,class為hello的元素管嬉,id為box的元素
通用選擇器
?通用選擇器皂林,可以同時選中頁面中的所有元素。
語法:
? ? ? ? *{ }
后代選擇器
?后代選擇器可以根據(jù)標(biāo)簽的關(guān)系宠蚂,為處在元素內(nèi)部的代元素設(shè)置樣式式撼。
語法:?
? ? ? ? 祖先元素? 后代元素? 后代元素{? }
比如p strong 會選中頁面中所有的P元素,內(nèi)的strong元素求厕。
偽類和偽元素
?有時候著隆,你需要選擇本身沒有標(biāo)簽,但是
仍然易于識別的網(wǎng)頁部位呀癣,比如段落首行 或鼠標(biāo)滑過的連接美浦。CSS為他們提供一些選擇器:偽類和偽元素。
給鏈接定義樣式
有四個偽類可以讓你根據(jù)訪問者與該鏈接的交互方式项栏,將鏈接設(shè)置成4種不同的狀態(tài)浦辨。
正常鏈接
????????-a:link
訪問過的鏈接
? ? ? ? -a:visited(只能定義自體顏色)
鼠標(biāo)劃過的鏈接? ? ??
? ? ? ? -a:hover
正在點擊的鏈接
? ? ? ? -a:active
獲取焦點
? ? ? ? -:focus
制定元素前
? ? ? ? -:before
指定元素后
? ? ? ? -:after
選中的元素
? ? ? ? -::selection
給段落定義樣式
首字母
? ? ? ? -:first-letter
首行
? ? ? ? -:first-line
屬性選擇器
屬性選擇器可以挑選帶有特殊屬性的標(biāo)簽
語法:
? ?????[屬性名]?
????????[屬性名="屬性值"]? ? ?選取含有指定性值的元素
????????[屬性名~="屬性值"]? ?
????????[屬性名|="屬性值"]
????????[屬性名^="屬性值"]? ?以什么為開頭的屬性值
????????[屬性名$="屬性值"]? ? 以什么為結(jié)尾的屬性值
? ? ? ? [屬性名*="屬性值"]? ? 選取屬性值包含制定內(nèi)容的元素
子元素選擇器
子元素選擇器可以給另一個元素的子元素設(shè)置樣式。
語法:
? ? ? ? 父元素 > 子元素{ }
比如body > h1 將選擇body子標(biāo)簽中的所有h1標(biāo)簽沼沈。
其他子元素選擇器
:first-child? ? ? ? 選擇第一個子標(biāo)簽
:last-child? ? ? ? 選擇最后一個子標(biāo)簽
:nth-child? ? ? ? 選擇指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type? ? ? ? 選擇指定類型的子元素
兄弟選擇器
除了根據(jù)祖先父子關(guān)系流酬,還可以根據(jù)兄弟關(guān)系查找元素。
語法:
? ? ? ? 查找后邊一個兄弟元素
? ? ? ? ? ? 兄弟元素 + 兄弟元素{}
? ? ? ? 查找后邊所有的兄弟元素
? ? ? ? ? ? 兄弟元素 ~ 兄弟元素{}
否定偽類
?否定偽類可以幫助我們選擇不是其他東西的某件東西列另。
語法:
? ? ? ? :not(選擇器){}
比如p:not(.hello)表示選擇所有的p元素但是class為hello的除外芽腾。
? ? ? ??