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

希望能通过这写这么一个系列的文章来督促和重新学习 css 的知识，也希望能帮助刚踏上前端之路的学弟学妹们全面一些的学习css知识,这个系列主要是从 css 的 api 的翻译笔记 css Api 文档

:disabled

:disable伪类主要是用来选取被禁用的元素，一个元素被禁用就代表着这个元素不能被激活（即不能被选中，点击，不能当作表单使用）或则被聚焦。当然这个元素也有能被激活的状态，也就是说这个元素能被激活或则被聚焦。

栗子

 input:disabled
      选择所有被禁用掉的表单

 select.country:disabled
      选择一个类名叫做 ｀country｀的被禁用掉的元素
      

css

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

HTML 5

<form action="#">
  <fieldset>
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing_is_shipping">Same as shipping address:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
    <br />
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

: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伪类能选取空内容的元素，只有节点和文本（空格也算文本），被认为子元素。类似注释这种不会影响元素的可以被视为是空内容

 语法
 <element>:empty { /* style properties */ }
 Examples

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

 .box:empty {
       background: lime;
 }
 
    <div class="box"><!-- I will be lime --></div>
    <div class="box">I will be red</div>
    <div class="box">
        <!-- I will be red because of the whitespace around this comment -->
    </div>

: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

下面的代码会给可用元素加上一个绿色的背景，给不可用的元素加上一个灰色的背景。

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
  <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
  <input type="button" value="Submit" />
</form>

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 

<div>
    <span>This span is limed!</span>
    <span>This span is not. :(</span>
</div>

CSS 

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

栗子2

HTML 

<ul>
     <li>List 1</li>
     <li>List 2</li>
     <li>List 3</li>
</ul>
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;
}
<div>
    <span>This span is first!</span>
    <span>This span is not. :(</span>
    <span>what about this <em>nested element</em>?</span>
    <strike>This is another type</strike>
    <span>Sadly, this one is not...</span>
</div>

:focus

:focus伪类选择器，只有在元素被光标聚焦的时候才能选择到元素，无论用户时通过鼠标还是键盘操作，只要能让元素获取光标，就能选择到元素

语法

element:focus { ... }

栗子

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

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

<input class="first-name" value="I'll be red when focused">
<input class="last-name" value="I'll be lime when focused">