第7章 征服CSS3選擇器(下)

2021-09-02 19:55:19 字數 2118 閱讀 6863

:enabled選擇器

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

示例演示

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

:disabled選擇器

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

html**:

css**:

div

input[type="text"]:enabled

結果演示

:checked選擇器

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

::selection選擇器

「::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選擇器

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

input[type=「text」]:read-only

:read-write選擇器

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

input[type="text"]:read-write
::before和::after

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

.clearfix::before,

.clearfix::after

.clearfix:after

.clearfix

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

關鍵**分析:

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

第7章 征服CSS3選擇器(下)

enabled選擇器 在web的表單中,有些表單元素有可用 enabled 和不可用 disabled 狀態,比如輸入框,密碼框,核取方塊等。在預設情況之下,這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器 enabled 對這些表單元素設定樣式。示例演示 通過 enabled 選擇器,修改文字...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

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

在web的表單中,有些表單元素有可用 enabled 和不可用 disabled 狀態,比如輸入框,密碼框,核取方塊等。在預設情況之下,這些表單元素都處在可用狀態。那麼我們可以通過偽選擇器 enabled 對這些表單元素設定樣式。示例演示 通過 enabled 選擇器,修改文字輸入框的邊框為2畫素的...