在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)都新增乙個空元素,然後為這兩個空元素新增陰影特效。
CSS 基礎教程
1簡介 1 css 概述 1.1css 指層疊樣式表 1.2內容與表現分離 2 多重樣式將層疊為乙個 2.1優先權 2.1.1內聯樣式 在 html 元素內部 2.1.2內部樣式表 位於 head 標籤內部 2.1.3外部樣式表 2.1.4瀏覽器預設設定 2基礎語法 1 語法 1.1由兩個主要的部分...
HTML5與CSS3基礎教程 筆記
1.構造塊 3.基本html結構 頁面字元編碼很重要,例如如果沒有設定utf 8,可能很多字元都會亂碼 語義化標籤 以下標籤為html5新引入 出於seo和可訪問性的目的,最好將重要的內容放在前面,通過css來改變他們在瀏覽器中的順序 4.文字 5.影象 無損 jpeg不支援透明,png gif均支...
HTML5與CSS3基礎教程 第7章 CSS構造塊
html5與css3基礎教程 第8版 第7章讀書筆記 rem單位 10.6章節。hsl rgba hsla格式是在css3引入的 rgb不是 css3還擴充套件了原有的16個基本顏色名稱。使用css優先順序適配老瀏覽器 p137 比如css的alpha透明度是在ie9之後才支援的,可以通過css的優...