国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小番茄的CSS筆記匯總（二）

callmewhy / 3195人閱讀

摘要：栗子選擇所有被禁用掉的表單選擇一個(gè)類名叫做的被禁用掉的元素偽類能選取空內(nèi)容的元素，只有節(jié)點(diǎn)和文本空格也算文本，被認(rèn)為子元素。

希望能通過這寫這么一個(gè)系列的文章來督促和重新學(xué)習(xí) css 的知識(shí)，也希望能幫助剛踏上前端之路的學(xué)弟學(xué)妹們?nèi)嬉恍┑膶W(xué)習(xí)css知識(shí),這個(gè)系列主要是從 css 的 api 的翻譯筆記 css Api 文檔

:disabled 
:disable偽類主要是用來選取被禁用的元素，一個(gè)元素被禁用就代表著這個(gè)元素不能被激活（即不能被選中，點(diǎn)擊，不能當(dāng)作表單使用）或則被聚焦。當(dāng)然這個(gè)元素也有能被激活的狀態(tài)，也就是說這個(gè)元素能被激活或則被聚焦。

栗子

 input:disabled
      選擇所有被禁用掉的表單

 select.country:disabled
      選擇一個(gè)類名叫做 ｀country｀的被禁用掉的元素

css

 input[type="text"]:disabled { background: #ccc; }

HTML 5


  

    Shipping address
    
    
    
  

  

    Billing address
:empty

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

：empty偽類能選取空內(nèi)容的元素，只有節(jié)點(diǎn)和文本（空格也算文本），被認(rèn)為子元素。類似注釋這種不會(huì)影響元素的可以被視為是空內(nèi)容
 語(yǔ)法
 :empty { /* style properties */ }
 Examples

 .box {
    background: red;
    height: 200px;
    width: 200px;
 }    

 .box:empty {
       background: lime;
 }
 
    

    
I will be red
:enabled

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can"t be activated or accept focus.

:enabled偽類，可以選擇任何可用的元素，可用的元素就是能被激活的元素，（可以被選中，點(diǎn)擊或則像輸入框一樣）接受聚焦，這類元素一般也有一個(gè)不可用的狀態(tài)（disabled），不可用狀態(tài)下，元素不可被激活，或接受聚焦

Example

下面的代碼會(huì)給可用元素加上一個(gè)綠色的背景，給不可用的元素加上一個(gè)灰色的背景。


   

   

  



input:enabled {
     color: #22AA22;
}
input:disabled {
      color: #D9D9D9;
}
:first 
這個(gè):first偽類，能夠選擇打印文檔的第一頁(yè)

Note: 使用這個(gè)選擇器，你不能改變所有的 CSS 屬性，你只能改 margin，orphan,window,以及分頁(yè)，其他屬性的書性值，將會(huì)被忽略

栗子
Examples

@page :first {
    margin: 2in 3in;
}
:first-child 
:first-child偽類，能夠選擇元素的父元素的第一個(gè)子元素


語(yǔ)法


element:first-child { /* style properties */ }
Examples

栗子1

HTML 



    This span is limed!
    This span is not. :(



CSS 

span:first-child {
    background-color: lime;
}

栗子2

HTML 


    
     
  • List 1
    • 
     
  • List 2
    • 
     
  • List 3
    • 


CSS 

li{
     color:red;
}
li:first-child{
    color:green;
}
:first-of-type 
:first-of-type偽類選擇器，能夠選擇父元素的子元素中，同種元素類型的第一個(gè)元素

語(yǔ)法

element:first-of-type { /* style properties */ }

栗子

div :first-of-type {
     background-color: lime;
}


    This span is first!
    This span is not. :(
    what about this nested element?
    This is another type
    Sadly, this one is not...
:focus 
:focus偽類選擇器，只有在元素被光標(biāo)聚焦的時(shí)候才能選擇到元素，無論用戶時(shí)通過鼠標(biāo)還是鍵盤操作，只要能讓元素獲取光標(biāo)，就能選擇到元素

語(yǔ)法

element:focus { ... }

栗子

.first-name:focus {
     color: red;
}

.last-name:focus {
     color: lime;
}

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

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

相關(guān)文章

  • 微信小程序資源匯總

    awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里，也歡迎各位 UI組件開發(fā)框架實(shí)用庫(kù)開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...

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

  • 1月份前端資源分享

    摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享視頻前端技術(shù)論壇融合不可錯(cuò)過的迷你庫(kù)測(cè)試框架實(shí)例教程為你詳細(xì)解讀請(qǐng)求頭的具體含意解析的庫(kù)如果要用前端框架，開發(fā)流程是怎樣的與有什么區(qū)別正確使用的方法是什么流程圖插件小如何讓元素只能輸入純文本前端技術(shù)中 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfront...

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

  • 微信應(yīng)用號(hào)（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號(hào)小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號(hào)（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...

    趙春朋 評(píng)論0 收藏0

  • 微信應(yīng)用號(hào)（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號(hào)小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號(hào)（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<