:enabled選擇器

在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態，比如輸入框，密碼框，複選框等。在預設情況之下，這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器“:enabled”對這些表單元素設定樣式。
示例演示
通過“:enabled”選擇器，修改文字輸入框的邊框為2畫素的紅色邊框，並設定它的背景為灰色。

:disabled選擇器

“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設定“disabled”屬性。

HTML程式碼:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用輸入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
  </div>
</form>  
 

CSS程式碼：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

結果演示

:checked選擇器

在表單元素中，單選按鈕和複選按鈕都具有選中和未選中狀態。（大家都知道，要覆寫這兩個按鈕預設樣式比較困難）。在CSS3中，我們可以通過狀態選擇器“:checked”配合其他標籤實現自定義樣式。而“:checked”表示的是選中狀態。

::selection選擇器

“::selection”偽元素是用來匹配突出顯示的文字(用滑鼠選擇文字時的文字)。瀏覽器預設情況下，用滑鼠選擇網頁文字是以“深藍的背景，白色的字型”顯示的，效果如下圖所示：

<p>“::selection”偽元素是用來匹配突出顯示的文字。瀏覽器預設情況下，選擇網站文字是深藍的背景，白色的字型，</p>

CSS程式碼：

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

結果演示：

注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支援 ::selection 選擇器。
2、Firefox 支援替代的 ::-moz-selection。 :read-only選擇器
“:read-only”偽類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設定了“readonly=’readonly’”
input[type="text"]:read-only{ border-color: #ccc; }

:read-write選擇器

“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。

input[type="text"]:read-write{
  border-color: #f36;
}

::before和::after

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

當然可以利用他們製作出其他更好的效果，比如右側中的陰影效果，也是通過這個來實現的。
關鍵程式碼分析：

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}

上面程式碼作用在class名叫.effect上的div的前（before）後(after)都新增一個空元素，然後為這兩個空元素新增陰影特效。