小番茄的CSS笔记汇总（二）

callmewhy 发布于2019-08-28 18:28 / 3059人阅读

摘要：栗子选择所有被禁用掉的表单选择一个类名叫做的被禁用掉的元素伪类能选取空内容的元素，只有节点和文本空格也算文本，被认为子元素。

希望能通过这写这么一个系列的文章来督促和重新学习 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;
}

专线服务超融合服务器小程序二次开发杭州网小二云服务器番茄番茄网址导航

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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