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

資訊專欄INFORMATION COLUMN

CSS學(xué)習(xí)筆記之選擇符

20171112 / 1270人閱讀

摘要：子選擇符的子元素同胞選擇符和在后面就行必須緊跟非子選擇符所有是元素孫子的元素選擇器屬性選擇器標(biāo)簽名屬性屬性值偽類選擇器動(dòng)態(tài)事件，狀態(tài)改變被訪問(wèn)過(guò)的鏈接偽類鏈接偽類。換句話說(shuō)，如果選擇符更明確特指度更高，無(wú)論它在哪里，都會(huì)勝出。

類型，類和ID選擇器

帶有空格的字體名稱要用""引起來(lái)

對(duì)選擇器分組可使同一規(guī)則適用于多個(gè)選擇器，例子如下

th,td {
    padding:0 10px 00;
}

選項(xiàng)的優(yōu)先級(jí)

h1 {
    font-family:"Times New Roman",serif;
}
//先選用前者，沒(méi)有前者，再使用后者

類型名與類名中間不應(yīng)有空格 div.btn-success

通用選擇器*，適用于文檔所有元素

* {
    font-family:Arial;
}

后代選擇器

div.planet table td {
    padding:0 10px 0 0;
}
//是類為planet的div元素的后代table的后代的td樣式

萬(wàn)萬(wàn)牢記，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號(hào)作為分隔符，不要弄混。

子選擇符>

section > p{
    font-style:Italic;
}
//section的子元素p

同胞選擇符～和+

section ~ p {
    font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必須緊跟section

非子選擇符

selection * a {
    ***;
}
//所有是selection元素孫子的a元素

ID選擇器 #

屬性選擇器

標(biāo)簽名[屬性="屬性值"]

img[title="hh jj"]{...}
偽類選擇器：動(dòng)態(tài)事件，狀態(tài)改變 
a:visited {
    color:mangenta;
}
//被訪問(wèn)過(guò)的鏈接
UI偽類
鏈接偽類

Link。此時(shí)，鏈接就在那兒等著用戶點(diǎn)擊。

Visited。用戶此前點(diǎn)擊過(guò)這個(gè)鏈接。

Hover。鼠標(biāo)指針正懸停在鏈接上。

Active。鏈接正在被點(diǎn)擊（鼠標(biāo)在元素上按下，還沒(méi)有釋放）。

focus偽類——鼠標(biāo)放在上面
input:focus {border:1px solid blue;}
target偽類
More Information  
//位于頁(yè)面其他地方、ID 為 more_info 的那個(gè)元素就是目標(biāo)。該元素可能是這樣的：



This is the information you are looking for.



//那么，如下 CSS 規(guī)則
#more_info:target {background:#eee;}
結(jié)構(gòu)化偽類

first-child 一組同胞元素的第一個(gè)

last-child

nth-child(3) 一組同胞元素的第三個(gè)

偽元素——似有實(shí)無(wú)的元素

first-letter

first-line

before 和 after

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//在類為age的p元素前面增加一段Age： 
p::first-letter {font-size:300%;}
//放大p的第一個(gè)字母
繼承和層疊

瀏覽器默認(rèn)樣式表

用戶樣式表

作者鏈接樣式表（按照它們鏈接到頁(yè)面的先后順序）

作者嵌入樣式

作者行內(nèi)樣式

越后面優(yōu)先級(jí)越高

規(guī)則一：包含 ID 的選擇符勝過(guò)包含類的選擇符，包含類的選擇符勝過(guò)包含標(biāo)簽名的選擇符。

規(guī)則二：如果幾個(gè)不同來(lái)源都為同一個(gè)標(biāo)簽的同一個(gè)屬性定義了樣式，行內(nèi)樣式勝過(guò)嵌入樣式，嵌入樣式勝過(guò)鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后聲明的勝過(guò)先聲明的。

規(guī)則一勝過(guò)規(guī)則二。換句話說(shuō)，如果選擇符更明確（特指度更高），無(wú)論它在哪里，都會(huì)勝出。

規(guī)則三：設(shè)定的樣式勝過(guò)繼承的樣式，此時(shí)不用考慮特指度（即顯式設(shè)定優(yōu)先）。下面簡(jiǎn)單解釋一下規(guī)則三。比如下面的標(biāo)記

Inheritance is weak in the Cascade

和下面的規(guī)則
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
會(huì)導(dǎo)致單詞“weak”變成藍(lán)色，因?yàn)樗鼜母冈?p 那里繼承了這個(gè)顏色值。
但是，只要我們?cè)俳o em 添加一條規(guī)則
em {color:red;}
0 - 0 - 1 （低特指度）
em 就會(huì)變成紅色。因?yàn)?，雖然它的特指度低（0-0-1），但 em 繼承的顏色值，會(huì)被為它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規(guī)則的特指度高（2-0-2）也沒(méi)有用。

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

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

相關(guān)文章

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見(jiàn)的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見(jiàn)其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫(xiě)的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過(guò)定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來(lái)實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來(lái)自單個(gè)樣式規(guī)...

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

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見(jiàn)的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見(jiàn)其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫(xiě)的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過(guò)定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來(lái)實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來(lái)自單個(gè)樣式規(guī)...

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

  • CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

    摘要：為了讓包圍列表項(xiàng)，沒(méi)有使用，而是使用了，是因?yàn)榍罢邥?huì)導(dǎo)致后來(lái)添加到下拉菜單中的子菜單無(wú)法顯示它們最終會(huì)顯示在父元素的外面，結(jié)果會(huì)導(dǎo)致溢出而被隱藏。它與父元素之間的間隙，實(shí)際上下拉菜單中第一個(gè)鏈接的邊框。 菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來(lái)分組鏈接不僅符合邏輯，而且即使沒(méi)有額外的 CSS 也能適當(dāng)顯示鏈接的層次。默認(rèn)情況下，由于列表（li）是塊級(jí)元素...

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

  • CSS學(xué)習(xí)筆記(四) CSS優(yōu)先級(jí)

    摘要：為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，提供了三種機(jī)制繼承層疊和特指。整個(gè)檢查更新過(guò)程結(jié)束后，再將每個(gè)標(biāo)簽以最終設(shè)定的樣式顯示出來(lái)。層疊規(guī)則四順序決定權(quán)重。規(guī)則三設(shè)定的樣式勝過(guò)繼承的樣式，此時(shí)不用考慮特指度即顯式設(shè)定優(yōu)先。 為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，CSS提供了三種機(jī)制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會(huì)向后代傳遞一樣?xùn)|西：CSS屬性...

    高勝山 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(三) CSS選擇器

    摘要：規(guī)則命名慣例規(guī)則由選擇符和聲明兩部分組成，其中選擇符用于指出規(guī)則所要選擇的元素，聲明則又由兩部分組成屬性和值。用于選擇作為指定祖先元素后代的標(biāo)簽。維基百科在其引證中大量使用了偽類。維基百科的引證鏈接就是正文里那些不起眼的數(shù)字鏈接。 1.為文檔添加樣式的三種方法 行內(nèi)樣式（寫(xiě)在特定 HTML 標(biāo)簽的 style 屬性里） 嵌入樣式（嵌入的 CSS 樣式是放在 HTML 文檔的 hea...

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

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

0條評(píng)論

閱讀需要支付1元查看
<