子元素和元素選擇器
????子元素:
????父元素:
????????元素的關(guān)系就要看縮進的位置
????后代元素選擇器:
????????選中標(biāo)簽加上空格再加上元素
????修改id選擇器下面所有的span元素
????#d1 span{
????}
????通過id選擇器找到目標(biāo)元素
????#d1 p span{
????}
????元素選擇器越短越好
????子元素選擇器:
????????div >? span{
????????????}
? ? ????span元素在div下面
偽類選擇器:
? ??<a >訪問的連接</a>
????<a >沒有訪問的連接</a>
????<input type="text">? ? ?(設(shè)置一個輸入文本框)
? ??a:link{
????????/*? ? */
? ? ? ? color:#9e57e6;
? ? ????}
????a:visited{
????/* 只能設(shè)置字體顏色? */
? ? ? ? color:#2b542c;
? ? ????}
????/* 鼠標(biāo)移動? */
? ? a:hover{
????color:#2ff700;
? ? ????}
????/*? ? 正在點擊的*/
? ? a:active{
????color:#3eb1d0;
? ? }
????/*? ? 獲取焦點
????輸入顏色的字體
????*/
? ? input:focus{
????background-color:#007aff;
? ? ? ? color:#7C0070;
? ? }
????/*? 選中的樣式 兼容瀏覽器較多? */
? ? p::selection{
????color:#4cae4c;
? ? }
????/*? 兼容火狐瀏覽器的選種樣式? */
? ? p::-moz-selection{
????color:#9dbed8;
? ? }
偽類選擇器:
????/*
????給第一個字體設(shè)置屬性
????*/
? ? p:first-letter{
????}
????/*? 給首行設(shè)置屬性? */
? ? p:first-line{
????}
????/* 給標(biāo)簽前方定義屬性? ?*/
? ? p:before{
????content:'我出現(xiàn)在段落最前方';
? ? }
????/*? 給標(biāo)簽后方定義屬性? */
? ? p:after{
????content:'我出現(xiàn)在段落最后方';
? ? }
否定偽類:
? ??除了某個類的元素
????p:not(類名){
????}
偽元素:
????正常鏈接
????????a:link
????訪問過的鏈接
????????a:visited(只能定義字體顏色)
????鼠標(biāo)滑過的鏈接
????????a:hover
????正在點擊的鏈接
????????a:active
? ??/*
????給第一個字體設(shè)置屬性
????*/
? ? p:first-letter{
????}
????/*? 給首行設(shè)置屬性? */
? ? p:first-line{
????}
????/*? ? */
? ? p:before{
????content:'我出現(xiàn)在段落最前方';
? ? }
????/*? ? */
? ? p:after{
????content:'我出現(xiàn)在段落最后方';
? ? }
????a的偽類的優(yōu)先級是一樣的假消,所以偽類的順序:
????????a:link
????????a:visited
????????a:hover
? ? ? ? a:active
屬性選擇器:
? ??title 屬性
????屬性選擇器用[]表示
????如:
????????p[title]{
????????屬性內(nèi)容
????????}
????p[title='內(nèi)容']{
????屬性
????}
????開頭屬性
????p[^title='內(nèi)容']{
????屬性
????}
????結(jié)尾屬性
????p[tittle$='內(nèi)容']{
????????屬性
????????}
????包含屬性
????p[title*='內(nèi)容']{
????屬性
????}
子類選擇器:
? ??/*
????給第一個子元素標(biāo)簽設(shè)置屬性
????p標(biāo)簽必須在第一個元素
????????任意一個標(biāo)簽下的第一個標(biāo)簽都會改變
????*/
? ? p:first-child{
????}
????/*? 選中最后一個子元素標(biāo)簽? */
? ? p:last-child{
????}
????/*? 偶數(shù)子元素標(biāo)簽? */
? ? p:nth-child(even){
????}
/*奇數(shù)子元素標(biāo)簽 */
? ? p:nth-child(odd){
????}
????/*指定準(zhǔn)確個數(shù)的子元素標(biāo)簽()*/
? ? p:nth-child(數(shù)字){
????}
????/*? p:first-of-type? 第一個p標(biāo)簽? */
? ? /*? p:last-of-type 最后一個p標(biāo)簽? */
兄弟選擇器:
? ??查找后邊一個兄弟元素:
????兄弟元素 + 兄弟元素{}
????加號必須是緊挨著的元素標(biāo)簽
????查找后邊所有的兄弟元素:
????兄弟元素 ~ 兄弟元素{}
????波浪線則是后面所有的元素標(biāo)簽
選擇器的優(yōu)先級:
????內(nèi)聯(lián)樣式:1000
????id選擇器:100
????類和偽類:10
????元素選擇器:1
????通配*:0
????繼承的樣式?jīng)]有優(yōu)先級
????如果優(yōu)先級一樣,后面的屬性會覆蓋前面的
????!important 優(yōu)先級最高會超過內(nèi)聯(lián)樣式
樣式繼承:
????給祖先元素設(shè)置樣式,所有的子元素都會繼承
????背景邊框和定位不會被繼承(background)