css3基礎教程十三征服CSS3選擇器

在web的表單中，有些表單元素有可用（「:enabled」）和不可用（「:disabled」）狀態，比如輸入框，密碼框，核取方塊等。在預設情況之下，這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器「:enabled」對這些表單元素設定樣式。

示例演示

通過「:enabled」選擇器，修改文字輸入框的邊框為2畫素的紅色邊框，並設定它的背景為灰色。

html**:

css**：

div
input[type="text"]:enabled

結果演示

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

示例演示

通過「:disabled」選擇器，給不可用輸入框設定明顯的樣式。

html**：

css**

form 
div 
input 
input[type="text"]:disabled

結果演示：

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

示例演示：

通過「:checked」狀態來自定義核取方塊效果。

html**

我是選中狀態

我是未選中狀態

css**：

form 
margin-bottom: 10px;
}.box 
.box input 
.box span 
input[type="checkbox"] + span 
input[type="checkbox"]:checked + span

結果演示

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

從上圖中可以看出，用滑鼠選中「專注it、網際網路技術」、「純乾貨、學以致用」、「沒錯、這是免費的」這三行文字中，預設顯示樣式為：藍色背景、白色文字。

有的時候設計要求,不使用上圖那種瀏覽器預設的突出文字效果，需要乙個與眾不同的效果，此時「::selection」偽元素就非常的實用。不過在firefox瀏覽器還需要新增字首。

示例演示:

通過「::selection」選擇器，將web中選中的文字背景變成紅色，文字變成綠色。

html**：

「::selection」偽元素是用來匹配突出顯示的文字。瀏覽器預設情況下，選擇**文字是深藍的背景，白色的字型，

css**：

::-moz-selection

::selection

結果演示：

注意：1、ie9+、opera、google chrome 以及 safari 中支援 ::selection 選擇器。

2、firefox 支援替代的 ::-moz-selection。

「:read-only」偽類選擇器用來指定處於唯讀狀態元素的樣式。簡單點理解就是，元素中設定了「readonly=』readonly』」

示例演示

通過「:read-only」選擇器來設定位址文字框的樣式。

html**：

css**：

form 
form > div 
input[type="text"]
input[type="text"]:-moz-read-only
input[type="text"]:read-only

結果演示

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

示例演示

使用「:read-write」選擇器來設定不是唯讀控制項的文字框樣式。

html**：

css**：

form 
form > div 
input[type="text"]
input[type="text"]:-moz-read-only
input[type="text"]:read-only
input[type="text"]:-moz-read-write
input[type="text"]:read-write

結果演示：

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

.clearfix::before,

.clearfix::after

.clearfix:after

.clearfix

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

關鍵**分析：

.effect::before, .effect::after

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

css3基礎教程十三征服CSS3選擇器

CSS 基礎教程

HTML5與CSS3基礎教程筆記

HTML5與CSS3基礎教程第7章 CSS構造塊

css3基礎教程十三征服CSS3選擇器

CSS 基礎教程

HTML5與CSS3基礎教程 筆記

HTML5與CSS3基礎教程 第7章 CSS構造塊

相關推薦

HTML5與CSS3基礎教程筆記

HTML5與CSS3基礎教程第7章 CSS構造塊