1、:enabled選擇器
在web
的表單中，有些表單元素有可用（
「:enabled」
）和不可用（
「:disabled」
）狀態，比如輸入框，密碼框，核取方塊等。在預設情況之下，這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器
「:enabled」
對這些表單元素設定樣式。
示例演示
通過「:enabled」
選擇器，修改文字輸入框的邊框為
2畫素的紅色邊框，並設定它的背景為灰色。
html**
:css**：
divinput[type="text"]:enabled //說白了就是給可用的輸入框新增樣式
2、:disabled選擇器
「:disabled
」選擇器剛好與「
:enabled
」選擇器相反，用來選擇不可用表單元素。要正常使用「
:disabled
」選擇器，需要在表單元素的
html
中設定「
disabled
」屬性。
示例演示
通過「:disabled
」選擇器，給不可用輸入框設定明顯的樣式。
html**：
css**
form
div
input
input[type="text"]:disabled
3、:checked選擇器
在表單元素中，單選按鈕和複選按鈕都具有選中和未選中狀態。（大家都知道，要覆寫這兩個按鈕預設樣式比較困難）。在css3
中，我們可以通過狀態選擇器「
:checked
」配合其他標籤實現自定義樣式。而「
:checked
」表示的是選中狀態。
示例演示：
通過「:checked
」狀態來自定義核取方塊效果。
html**
css**：
form
margin-bottom: 10px;
}.box
.box input
.box span
input[type="checkbox"] + span
input[type="checkbox"]:checked + span
4、::selection選擇器
「::selection
」偽元素是用來匹配突出顯示的文字
(用滑鼠選擇文字時的文字
)。瀏覽器預設情況下，用滑鼠選擇網頁文字是以「深藍的背景，白色的字型」顯示的，效果如下圖所示：
從上圖中可以看出，用滑鼠選中「專注it
、網際網路技術」、「純乾貨、學以致用」、「沒錯、這是免費的」這三行文字中，預設顯示樣式為：藍色背景、白色文字。
有的時候設計要求,
不使用上圖那種瀏覽器預設的突出文字效果，需要乙個與眾不同的效果，此時「
::selection
」偽元素就非常的實用。不過在
firefox
瀏覽器還需要新增字首。
示例演示:
通過「::selection
」選擇器，將
web中選中的文字背景變成紅色，文字變成綠色。
html**：
「::selection
」偽元素是用來匹配突出顯示的文字。瀏覽器預設情況下，選擇**文字是深藍的背景，白色的字型，
css**：
::-moz-selection
::selection
form > div
input[type="text"]
input[type="text"]:-moz-read-only
input[type="text"]:read-only
6、:read-write
選擇器「: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
7、::before
和::after
::before和
::after
這兩個主要用來給元素的前面或後面插入內容，這兩個常和
"content"
配合使用，使用的場景最多的就是清除浮動。
.clearfix::before,
.clearfix::after
.clearfix:after
.clearfix
當然可以利用他們製作出其他更好的效果，比如右側中的陰影效果，也是通過這個來實現的。
關鍵**分析：
.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;
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
CSS3選擇器（下）
在web的表單中，有些表單元素有可用 enabled 和不可用 disabled 狀態，比如輸入框，密碼框，核取方塊等。在預設情況之下，這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器 enabled 對這些表單元素設定樣式。示例演示 通過 enabled 選擇器，修改文字輸入框的邊框為2畫素的...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...