css之選擇器

tinysun1234 發(fā)布于2019-08-29 17:10 / 1944人閱讀

摘要：同時(shí)匹配元素和元素后代選擇器，用空格分割。選擇元素所有的直接子元素中滿足條件的元素直接相鄰選擇器，用分割。選擇元素之后相鄰的下一個(gè)兄弟元素，但要處于同一個(gè)父元素內(nèi)普通相鄰選擇器弟弟選擇器。

CSS（Cascading層疊 Style樣式 sheets表），是用來(lái)為網(wǎng)頁(yè)添加樣式的代碼。
css選擇器的作用是用于選中元素，以便為其添加樣式
1.基礎(chǔ)選擇器

通用元素選擇器（*），通常用于取消瀏覽器自帶的樣式，不常用

id選擇器（#id）

class類選擇器（.class）

標(biāo)簽選擇器（p）

2.組合選擇器
組合選擇器，E,F表示基礎(chǔ)選擇器
E,F 多元素選擇器，用逗號(hào)分割。同時(shí)匹配元素E和元素F
E F 后代選擇器，用空格分割。選擇E元素所有的后代中滿足F選擇器條件的元素（不只是子元素，子元素所有的后代）
E>F "子元素選擇器，用>分割。
選擇E元素所有的直接子元素中滿足F條件的元素"
E+F "直接相鄰選擇器，用+分割。
選擇E元素之后相鄰的下一個(gè)兄弟元素F，但要處于同一個(gè)父元素內(nèi)"

E~F "普通相鄰選擇器（弟弟選擇器）。
選擇E元素之后的元素F（無(wú)論直接相鄰與否），但要處于同一個(gè)父元素內(nèi)"

3.屬性選擇器
html由元素組成，元素由標(biāo)簽（p/div等標(biāo)簽），內(nèi)容和屬性（例如class屬性，class="haha"表示class屬性的值為haha）組成。

可以通過(guò)標(biāo)簽的屬性來(lái)選擇元素


input[type=password]{
width:30px;}

[href^="http://"] {
  background-color: #f0ad4e;
}

[src$="gif"] {
  border: 1px solid #ccc;
}

4.偽類選擇器
常用的

E:link 匹配E所有未被點(diǎn)擊的鏈接

E:visited 匹配E所有已經(jīng)被點(diǎn)擊的鏈接

E:active 匹配鼠標(biāo)已經(jīng)其上按下，還沒有釋放的E元素

E:hover 匹配鼠標(biāo)懸停其上的E元素

 //a標(biāo)簽設(shè)置偽類時(shí)的順序比較重要，會(huì)產(chǎn)生樣式覆蓋。
//如果a：visited的樣式，放在最后，a鏈接被點(diǎn)擊之后，再hover或者active都不會(huì)生效。
            a{
                color:red;
            }
            a:visited{
                color:blue;
            }
            a:hover{
                color:green;
            }
            a:active{
                color:yellow;
            }

E：focus 匹配處于焦點(diǎn)的元素

點(diǎn)擊輸入框等元素當(dāng)光標(biāo)閃爍可以輸入內(nèi)容時(shí)，就說(shuō)明輸入框處于焦點(diǎn)狀態(tài)

E:enabled 匹配表單中可用的元素

E:disabled 匹配表單中禁用的E元素

E:checked 匹配表單中，被選中的radio或者checkbox元素

E::selection 匹配用戶鼠標(biāo)當(dāng)前選中的元素，注意這里是由兩個(gè)冒號(hào)的

::selection{
color:red;
} //被鼠標(biāo)選中的文字會(huì)變紅

E:first-child 匹配其父元素E的第一個(gè)子元素

E:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)

E:nth-child(n) 匹配其父元素的第N個(gè)子元素，第一個(gè)標(biāo)號(hào)為1，相當(dāng)于E:first-child

E:nth-last-child(n) 匹配其父元素的倒數(shù)第N個(gè)子元素，第一個(gè)編號(hào)為1

小tip：先找到E的父元素，再選擇它父元素下面第n個(gè)元素

E:nth-of-type(n) 選擇滿足E選擇器的元素的父元素內(nèi)，滿足E選擇器條件的子元素中不同種類型（類型是指標(biāo)簽，如p標(biāo)簽和div標(biāo)簽是不同種類型）第N個(gè)子元素

小tip：先找到E的父元素，再選擇它父元素下面滿足E條件的元素，再選擇這些元素同種類型的第N個(gè)

E:nth-last-of-type(n) 與nth-of-type(n) 作用類似，但是倒著匹配的

小tip：先找到E的父元素，再選擇它父元素下面滿足E條件的元素，再倒著選擇這些元素同種類型的第N個(gè)

E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)

E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)

5.偽元素選擇器
偽元素選擇器前面有兩個(gè)冒號(hào)（::），可以添加到選擇器的末尾以選擇元素的某個(gè)部分。

E::first-line 匹配E元素內(nèi)容的第一行

E::first-letter 匹配E元素內(nèi)容的第一個(gè)字母

E::before 在E元素內(nèi)部首位生成一個(gè)偽元素，插入生成的內(nèi)容

可用于清除浮動(dòng)，主要是簡(jiǎn)化標(biāo)簽

div::before{
content:"aa";
width:0px;
}

E::after 在E元素內(nèi)部最后生成一個(gè)偽元素，插入生成的內(nèi)容

6.選擇器優(yōu)先級(jí)

普通場(chǎng)景

1、在屬性后面使用 !important 會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式

.child{
color:red !important;
}

2、作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式

3、id選擇器

4、類選擇器

5、偽類選擇器

6、屬性選擇器

7、標(biāo)簽選擇器

8、通配符選擇器

9、瀏覽器自定義

復(fù)雜場(chǎng)景下：

標(biāo)記為ABCD

           1.  行內(nèi)樣式:     ==>a
           2.  id選擇器:                            ==>b
           3.  類，屬性選擇器和偽類選擇器              ==>c
           4. 標(biāo)簽選擇器和偽元素選擇器                ==>d

然后根據(jù)選擇器去分類計(jì)算，最后先比較a的值，a相同就比較b，以此類推。數(shù)值更高，優(yōu)先級(jí)更高！例如：

            *       {}  /a=0 b=0 c=0 d=1/-> /0,0,0,1/
            p       {}  /a=0,b=0,c=0,d=1/-> /0,0,0,1/
            a:hover {}  /a=0,b=0,c=1,d=1/-> /0,0,1,1/
            ul li   {}  /a=0,b=0,c=0,d=2/-> /0,0,0,2/
            h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/
            ul ol li.active  {}  /a=0,b=0,c=1,d=3/->/0,0,1,3/
            #ct .box p {}  /a=0,b=1,c=1,d=1/-> /0,1,1,1/
            div#header:after {}  /a=0,b=1,c=0,d=2/-> /0,1,0,2/
            style=""    /a=1,b=0,c=0,d=0/ ->/1,0,0,0/

7.例子

 
         
           div.box
           p.box
           div.box
           
             div.item
             p.item

云服務(wù)器 GPU云服務(wù)器 css選擇器基礎(chǔ)選擇器css css選擇 js css 加載器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114146.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

tinysun1234

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

安裝tensorflow1.14

閱讀 2078·2023-04-25 17:48
如何建立虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

閱讀 3590·2021-09-22 15:37
大家用云主機(jī)做什么-云主機(jī)可以做什么？

閱讀 2941·2021-09-22 15:36
主機(jī)ip是什么-主機(jī)ip地址有什么要求？

閱讀 6008·2021-09-22 15:06
content 內(nèi)容生成技術(shù)1

閱讀 1644·2019-08-30 15:53
用code打造自己的過(guò)渡動(dòng)畫

閱讀 1431·2019-08-30 15:52
圖片輪播組件實(shí)現(xiàn)

閱讀 716·2019-08-30 13:48
網(wǎng)頁(yè)與瀏覽器窗口の真理

閱讀 1126·2019-08-30 12:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

css之選擇器

相關(guān)文章

CSS入門之引用、選擇器、屬性（六分之三）

**HTML & CSS之小白初入江湖**

**HTML & CSS之小白初入江湖**

**前端筆記之CSS（上）**

前端（二）之 CSS