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

callmewhy 發布于2019-08-28 18:28 / 3184人閱讀

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

希望能通過這寫這么一個系列的文章來督促和重新學習 css 的知識，也希望能幫助剛踏上前端之路的學弟學妹們全面一些的學習css知識,這個系列主要是從 css 的 api 的翻譯筆記 css Api 文檔

:disabled

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

栗子

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

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

css

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

HTML 5


  
    Shipping address
    
    
    
  
  
    Billing address
    Same as shipping 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偽類能選取空內容的元素，只有節點和文本（空格也算文本），被認為子元素。類似注釋這種不會影響元素的可以被視為是空內容

 語法
 :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偽類，可以選擇任何可用的元素，可用的元素就是能被激活的元素，（可以被選中，點擊或則像輸入框一樣）接受聚焦，這類元素一般也有一個不可用的狀態（disabled），不可用狀態下，元素不可被激活，或接受聚焦

Example

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


  First field (enabled): 

  Second field (disabled):

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;
}

云服務器 GPU云服務器小程序二次開發杭州網小二云服務器番茄番茄網址導航

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111257.html

微信小程序資源匯總

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

Olivia 2019-08-21 17:48 評論0 收藏0
1月份前端資源分享

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

solocoder 2019-08-20 14:37 評論0 收藏0
微信應用號（小程序）資源匯總（1010更新）

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

趙春朋 2019-08-29 11:20 評論0 收藏0
微信應用號（小程序）資源匯總（1010更新）

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

piapia 2019-08-20 11:12 評論0 收藏0