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

資訊專欄INFORMATION COLUMN

CSS選擇器的分類

waltr / 1434人閱讀

摘要：每個(gè)聲明是一個(gè)屬性和該屬性的值的組合元素選擇器最常見的選擇器往往是元素。這個(gè)選擇器可以與任何元素匹配，就像是一個(gè)通配符類選擇器要應(yīng)用樣式而不考慮具體涉及的元素，最常用的方法就是使用類選擇器。

《PHP 面試問答》 
結(jié)合實(shí)際 PHP 面試，系統(tǒng)的匯總面試中的各種各樣的問題，嘗試提供簡潔準(zhǔn)確的答案。如果你在 PHP 面試中遇到問題，歡迎提 Issues 交流。包含網(wǎng)絡(luò)協(xié)議、數(shù)據(jù)結(jié)構(gòu)與算法、PHP、Web、MySQL、Redis、Linux、安全、設(shè)計(jì)模式、架構(gòu)、自我介紹、離職原因、職業(yè)規(guī)劃、準(zhǔn)備問題等部分
基本規(guī)則 
通過 CSS 可以向文檔中的一組元素類型應(yīng)用某些規(guī)則
利用 CSS，可以創(chuàng)建易于修改和編輯的規(guī)則，且能很容易地將其應(yīng)用到定義的所有文本元素
規(guī)則結(jié)構(gòu) 
每個(gè)規(guī)則都有兩個(gè)基本部分：選擇器和聲明塊；聲明塊由一個(gè)或多個(gè)聲明組成；每個(gè)聲明則是一個(gè)屬性-值對(duì)
每個(gè)樣式表由一系列規(guī)則組成



如規(guī)則左邊所示，選擇器定義了將影響文檔中的哪些部分
規(guī)則右邊包含聲明塊，它由一個(gè)或多個(gè)聲明組成。每個(gè)聲明是一個(gè) CSS 屬性和該屬性的值的組合
元素選擇器 
最常見的選擇器往往是 HTML 元素。文檔的元素就是最基本的選擇器
聲明和關(guān)鍵字 
聲明塊包含一個(gè)或多個(gè)聲明。聲明總有如下格式：一個(gè)屬性后面跟一個(gè)冒號(hào)，再后面是一個(gè)值，然后是一個(gè)分號(hào)。冒號(hào)和分號(hào)后面可以有0個(gè)或多個(gè)空格
如果一個(gè)屬性的值可以取多個(gè)關(guān)鍵字，在這種情況下，關(guān)鍵字通常由空格分隔。并不是所偶屬性都能接受多個(gè)關(guān)鍵字，不過確實(shí)有許多屬性是這樣


p {font: medium Helvetica;}
選擇器 通配選擇器 
CSS2引入了一種新的簡單選擇器，稱為通配選擇器（universal selector），顯示為一個(gè)星號(hào)（*）。這個(gè)選擇器可以與任何元素匹配，就像是一個(gè)通配符
* {color: red;}
類選擇器 
要應(yīng)用樣式而不考慮具體涉及的元素，最常用的方法就是使用類選擇器。在使用類選擇器之前，需要修改具體的文檔標(biāo)記，以便選擇器正常工作
為了將一個(gè)類選擇器的樣式與元素關(guān)聯(lián)，必須將 class 屬性指定為一個(gè)適當(dāng)?shù)闹?/p>

*.warning {font-weight: bold;}
p.warning {font-weight: bold;}
.warning {font-weight: bold;}
多類選擇器 
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}
ID 選擇器 
ID 選擇器前面有一個(gè) # 號(hào)
ID 選擇器不引用 class 屬性的值


在一個(gè) HTML 文檔中，ID 選擇器會(huì)使用一次，且僅一次


*#first-para {font-weight: bold;}
#first-para {font-weight: bold;}
屬性選擇器 
在某些標(biāo)記語言中，不能使用類和 ID 選擇器。為了解決這個(gè)問題，CSS2引入了屬性選擇器（attribute selector），它可以根據(jù)元素的屬性及屬性值來選擇元素
簡單屬性選擇 
如果希望選擇某個(gè)屬性的元素，而不討論該屬性的值是什么，可以使用一個(gè)簡單屬性選擇器
Hello


Serenity


Fooling
h1[class] {color: silver;}
img[alt] {border: 3px solid red;} /*對(duì)所有帶有 alt 屬性的圖像應(yīng)用樣式*/
*[title] {font-weight: bold;} /*包含標(biāo)題(title)信息的所有元素變?yōu)榇煮w顯示*/
根據(jù)具體屬性值選擇 
除了選擇有某些屬性的元素，還可以進(jìn)一步縮小選擇范圍，只選擇有特定屬性值的元素
/*將指向 Web 服務(wù)器上某個(gè)特定超鏈接變成粗體*/
a[] {font-weight: bold;}
Venus
Earth
Mars
/*將第二個(gè)元素文本變成粗體*/
planet[moons="1"] {
    font-weight: bold;
}
根據(jù)部分屬性值選擇 
如果屬性能接受詞列表（詞之間用空格分隔），可以根據(jù)其中的任意一個(gè)詞進(jìn)行選擇
img[title~="Figure"] {border: 1px solid gray;}

子串匹配屬性選擇器

類型 描述
[foo^="bar"] 選擇 foo 屬性值以"bar"開頭的所有元素
[foo$="bar"] 選擇 foo 屬性值以"bar"結(jié)尾的所有元素
[foo*="bar"] 選擇 foo 屬性值中包含子串"bar"的所有元素
特定屬性選擇類型 
Hello!


Greetings!


G"day!


Bonjour!


Jrooana!
*[lang|="en"] {color: white;}
這種屬性選擇器最常見的用途是匹配語言值
后代選擇器 

通過文檔樹結(jié)構(gòu)，可以很形象的理解什么是后代選擇器（descendant selector），也稱為包含選擇器/上下文選擇器。定義后代選擇器就是來創(chuàng)建一些規(guī)則，它們僅在某些結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用
文字一


文字一后代


文字二


文字三
.row p{color: red;}
選擇子元素 
在某些情況下，可能并不想選擇一個(gè)任意的后代元素；而是希望縮小范圍，只選擇另一個(gè)元素的子元素
.row > p{color: red;}
選擇相鄰兄弟元素 
    
    
  1. List item 1
    2. 
    
  2. List item 1
    3. 
    
  3. List item 1
    4. 
    
  4. List item 1
    5. 



    
    
  • A list item
    • 
    
  • Another list item
    • 
    
  • Yet Another list item
    • 
    
  • Lat list item
    • 

ol + ul {font-weight: bold;} /*將命中 ul*/
ul 必須緊跟在 ol 后面
偽類選擇器 
錨類型稱為偽類
鏈接偽類

CSS2.1定義了兩個(gè)只應(yīng)用于超鏈接的偽類

偽類名 描述
:link 指示作為超鏈接并指向一個(gè)未訪問地址的所有錨
:visited 指示作為已訪問超鏈接的所有錨 
a {color: black;}
a:link {color: bule;}
a:visited {color: red;}
動(dòng)態(tài)偽類 
CSS2.1定義了3個(gè)動(dòng)態(tài)偽類，它們可以根據(jù)用戶行為改變文檔的外觀
偽類名 描述
:focus 指示當(dāng)前擁有輸入焦點(diǎn)的元素
:hover 指示鼠標(biāo)指針停留在哪個(gè)元素上
:active 指示被用戶輸入激活的元素 
偽類順序：link-visited-focus-hover-active
選擇第一個(gè)子元素 
可以使用靜態(tài)偽類:first-child 來選擇元素的第一個(gè)子元素
p:first-child {font-weight: bold;}
偽元素選擇器 
就像偽類為錨指定幻像類一樣，偽元素能夠在文檔中插入假象的元素，從而得到某種效果。CSS2.1中定義了4個(gè)偽元素：設(shè)置首字母樣式、設(shè)置第一行樣式、設(shè)置之前和之后元素的樣式
設(shè)置首字母樣式 
p:first-letter {color: red;}
設(shè)置第一行樣式 
p:first-line {color: purple;}
:first-letter 和 :first-line 的限制 
在 CSS2 中，:first-letter 和:first-line 偽元素只能應(yīng)用于標(biāo)記或段落之類的塊級(jí)元素，而不能應(yīng)用于超鏈接等的行內(nèi)元素
設(shè)置之前和之后元素的樣式 
p:before {color: black;}
p:after {color: red;}
本文轉(zhuǎn)載自楓葉林博客，《CSS選擇器的分類》

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

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

相關(guān)文章

  • CSS選擇器總結(jié)（分類、優(yōu)先級(jí)）

    摘要：樣式選擇器權(quán)重優(yōu)先級(jí)如下的權(quán)重為選擇器的權(quán)重為類選擇器的權(quán)重為偽類選擇器的權(quán)重為屬性選擇器的權(quán)重為標(biāo)簽選擇器的權(quán)重為偽元素選擇器的權(quán)重為通配符的權(quán)重為綜合上述權(quán)重優(yōu)先級(jí)來看，正確的優(yōu)先級(jí)排序應(yīng)該是內(nèi)聯(lián)樣式類偽類屬性選擇標(biāo)簽偽元素繼承通配符 CSS選擇器是編寫CSS代碼時(shí)的一個(gè)核心概念，選擇器定義了相應(yīng)的樣式將會(huì)影響到文檔中的哪些部分，以下是自己在學(xué)習(xí)及工作過程中對(duì)CSS選擇器的一些總結(jié)...

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

  • css的居中效果、li鼠標(biāo)懸浮背景顏色從上往下變化、選擇器的分類與使用

    摘要：一居中效果行內(nèi)垂直居中行內(nèi)水平居中內(nèi)塊級(jí)元素水平居中內(nèi)塊級(jí)元素垂直居中二鼠標(biāo)懸浮背景顏色從上往下變化三選擇器的分類與使用核心選擇器標(biāo)簽類并且或者層次后代子代下一個(gè)兄弟之后所有兄弟屬性選擇器過濾器配合基本選擇器進(jìn)行篩選選擇具有 一 css居中效果（1）div行內(nèi)垂直居中 div li{ height:30px; line-height:30px; ...

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

  • CSS選擇器的分類

    摘要：每個(gè)聲明是一個(gè)屬性和該屬性的值的組合元素選擇器最常見的選擇器往往是元素。這個(gè)選擇器可以與任何元素匹配，就像是一個(gè)通配符類選擇器要應(yīng)用樣式而不考慮具體涉及的元素，最常用的方法就是使用類選擇器。 《PHP 面試問答》 結(jié)合實(shí)際 PHP 面試，系統(tǒng)的匯總面試中的各種各樣的問題，嘗試提供簡潔準(zhǔn)確的答案。如果你在 PHP 面試中遇到問題，歡迎提 Issues 交流。包含網(wǎng)絡(luò)協(xié)議、數(shù)據(jù)結(jié)構(gòu)與算法、...

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

  • 【CSS 學(xué)習(xí)】CSS 選擇器、選擇器的優(yōu)先級(jí)和權(quán)重

    摘要：優(yōu)先級(jí)和權(quán)重中的權(quán)重分別為個(gè)等級(jí)內(nèi)聯(lián)樣式文檔中的屬性選擇器類偽類屬性選擇器元素偽類元素這個(gè)等級(jí)由高到低代表不同的優(yōu)先級(jí)，寫在規(guī)則后，可以將對(duì)應(yīng)的規(guī)則提升到最高權(quán)重。 以下總結(jié)內(nèi)容摘自 《移動(dòng)Web前端高效開發(fā)實(shí)戰(zhàn)》 基本選擇器 選擇器 名 稱 實(shí) 例 描 述 版 本 * 通用選擇器（Universal selectors） * 匹配所有的元素 2.1 E 標(biāo)簽選擇器（Ty...

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

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

0條評(píng)論

閱讀需要支付1元查看
<