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

資訊專欄INFORMATION COLUMN

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

callmewhy / 3193人閱讀

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

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

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

栗子

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

 select.country:disabled
      選擇一個類名叫做 ｀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é)點和文本（空格也算文本），被認為子元素。類似注釋這種不會影響元素的可以被視為是空內(nèi)容
 語法
 :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偽類，可以選擇任何可用的元素，可用的元素就是能被激活的元素，（可以被選中，點擊或則像輸入框一樣）接受聚焦，這類元素一般也有一個不可用的狀態(tài)（disabled），不可用狀態(tài)下，元素不可被激活，或接受聚焦

Example

下面的代碼會給可用元素加上一個綠色的背景，給不可用的元素加上一個灰色的背景。


   

   

  



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

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

栗子
Examples

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


語法


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偽類選擇器，能夠選擇父元素的子元素中，同種元素類型的第一個元素

語法

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偽類選擇器，只有在元素被光標聚焦的時候才能選擇到元素，無論用戶時通過鼠標還是鍵盤操作，只要能讓元素獲取光標，就能選擇到元素

語法

element:focus { ... }

栗子

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

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

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

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

相關(guān)文章

  • 微信小程序資源匯總

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

    Olivia 評論0 收藏0

  • 1月份前端資源分享

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

    solocoder 評論0 收藏0

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

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

    趙春朋 評論0 收藏0

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

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

    piapia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<