成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS:選擇器與優(yōu)先級(jí)

linkFly / 1771人閱讀

摘要：樣式優(yōu)先級(jí)原則總的原則規(guī)定擁有更高確定度的選擇器優(yōu)先級(jí)更高如果樣式中包含沖突的規(guī)則，且它們具有相同的確定度。

樣式優(yōu)先級(jí)原則 
總的原則
1.CSS規(guī)定擁有更高確定度的選擇器優(yōu)先級(jí)更高
2.如果樣式中包含沖突的規(guī)則，且它們具有相同的確定度。那么，后出現(xiàn)的規(guī)則優(yōu)先級(jí)高。

優(yōu)先級(jí)：由高到低(從上到下)

!important

內(nèi)聯(lián)(1,0,0,0)

id: (0,1,0,0)

類：(0,0,1,0)

偽類/屬性

元素：(0,0,0,1)

通配符

類選擇器

class="web",多個(gè)元素可以擁有同一個(gè)類名

id選擇器

id="web",具有唯一性

偽類選擇器

CSS偽類（pseudo-class）是加在選擇器后面的用來(lái)指定元素狀態(tài)的關(guān)鍵字。

鏈接相關(guān)

a:link 未訪問(wèn)的鏈接
a:visited 已訪問(wèn)的鏈接
a:hover 鼠標(biāo)移動(dòng)到鏈接上
a:active 選定的鏈接
:target 可用于選取當(dāng)前活動(dòng)的目標(biāo)元素,href="#222"（內(nèi)容跳轉(zhuǎn)）

表單元素相關(guān)

:focus 偽類在元素獲得焦點(diǎn)時(shí)向元素添加特殊的樣式
:disabled 匹配每個(gè)被禁用的元素（大多用在表單元素上）。
:enabled 表示任何啟用的（enabled）元素
:checked 匹配每個(gè)已被選中的 input 元素（只用于單選按鈕和復(fù)選框)(只有opera支持)

父子相關(guān)

:empty 代表沒(méi)有子元素的元素，只計(jì)算元素結(jié)點(diǎn)及文本（包括空格），注釋、運(yùn)行指令不考慮在內(nèi)。

:first-child 代表了某個(gè)元素，這個(gè)元素是它父元素的的第一個(gè)子元素
:first-of-type
:last-of-type

:nth-clild(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型
n 可以是數(shù)字、關(guān)鍵詞或公式(2,an + b,odd)(n 是計(jì)數(shù)器（從 0 開(kāi)始），b 是偏移值)
:nth-last-child(n)倒數(shù)
:nth-of-type(n)

屬性選擇器

E[attr]
E[attr=value]
E[attr~=value] 選擇器用于選取屬性值中包含指定詞匯的元素

E[attr^=value] 選擇器匹配屬性值以指定值開(kāi)頭的每個(gè)元素。
E[attr*=value]
E[attr$=value]

基于關(guān)系的選擇器 父子關(guān)系

A E 任何是元素A的后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推)
A > E 任何元素A的子元素(直接)

兄弟關(guān)系

B + E 任何元素B的下一個(gè)兄弟元素E(直接)
B ~ E B元素后面的擁有共同父元素的兄弟元素E

且

.class1.class2 同時(shí)包含class1和class2屬性的元素
F#id 具有某id的F元素

或

E,F 所有E或F元素

偽元素

E:first-line 向文本的首行添加特殊樣式。
E:first-letter 向文本的第一個(gè)字母添加特殊樣式。
E:before 在元素之前添加內(nèi)容。
E:after 在元素之后添加內(nèi)容。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111144.html

相關(guān)文章

  • 【Hello CSS】第五章-CSS的選擇器與函數(shù)

    摘要：內(nèi)聯(lián)樣式標(biāo)簽魚(yú)頭注根據(jù)張?chǎng)涡窭蠋熢谟腥€(gè)選擇器可以干掉個(gè)選擇器分享過(guò)個(gè)級(jí)聯(lián)選擇器可以擊敗個(gè)選擇器目前已無(wú)此現(xiàn)象。 作者：陳大魚(yú)頭 github： KRISACHAN 在上一篇的HTML的標(biāo)簽與語(yǔ)意中簡(jiǎn)單的介紹了HTML標(biāo)簽跟其一些屬性，向各位堅(jiān)持看到這里的親表示真誠(chéng)的感謝。本篇主要會(huì)分享一些跟CSS選擇器（CSS Selectors）相關(guān)的內(nèi)容，有興趣的請(qǐng)繼續(xù)往下看。 CSS選擇...

    cod7ce 評(píng)論0 收藏0

  • 前端面試題-CSS選擇器性能優(yōu)化

    摘要：不要在編寫規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師，應(yīng)該避免編寫一些常見(jiàn)的開(kāi)銷很大的CS...

    Scott 評(píng)論0 收藏0

  • 前端面試題-CSS選擇器性能優(yōu)化

    摘要：不要在編寫規(guī)則時(shí)用標(biāo)簽名或類名不要在編寫規(guī)則時(shí)用標(biāo)簽名把多層標(biāo)簽選擇規(guī)則用規(guī)則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關(guān)心頁(yè)面性能的話，他們真不該被使用擴(kuò)展閱讀前端面試題選擇器前端面試題優(yōu)先級(jí) 一、CSS選擇符 CSS選擇符由一些初始化參數(shù)組成，這些參數(shù)指明了要應(yīng)用這個(gè)CSS規(guī)則的頁(yè)面元素。 作為一個(gè)網(wǎng)站的前端開(kāi)發(fā)工程師，應(yīng)該避免編寫一些常見(jiàn)的開(kāi)銷很大的CS...

    XGBCCC 評(píng)論0 收藏0

  • css選擇器

    摘要：前言選擇器是前端的基本功只要你是一個(gè)前端這個(gè)一定要掌握今天之所以要重溫一下選擇器主要是和大家再?gòu)?fù)習(xí)一下選擇器中的一些常用符號(hào)的使用例如等的使用之所以要復(fù)習(xí)呢是因?yàn)槲乙粋€(gè)寫后端的哥們前端寫的也很好但是他今天突然問(wèn)我中加號(hào)和大于號(hào)是啥意思我說(shuō)這前言 css選擇器,是前端的基本功,只要你是一個(gè)前端,這個(gè)一定要掌握!今天之所以要重溫一下css選擇器,主要是和大家再?gòu)?fù)習(xí)一下css選擇器中的一些常用符號(hào)...

    番茄西紅柿 評(píng)論0 收藏0

  • 前端基礎(chǔ)-CSS的各種選擇器的特點(diǎn)以及CSS的三大特性

    摘要：一基本選擇器二后代選擇器子元素選擇器三兄弟選擇器四交集選擇器與并集選擇器五序列選擇器六屬性選擇器七偽類選擇器八偽元素選擇器九三大特性一基本選擇器選擇器作用根據(jù)指定的名稱，在當(dāng)前界面中找到對(duì)應(yīng)的唯一一個(gè)的標(biāo)簽，然后設(shè)置屬性格式名稱屬性值注意點(diǎn) 一、 基本選擇器 二、 后代選擇器、子元素選擇器 三、 兄弟選擇器 四、 交集選擇器與并集選擇器 五、 序列選擇器 六、 屬性選擇器 七、 偽類選擇器 ...

    番茄西紅柿 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<