-
text-shadow:?X-Offset?Y-Offset?blur?color;
查看全部 -
@font-face能夠加載服務(wù)器端的字體文件,讓瀏覽器端可以顯示用戶電腦里沒(méi)有安裝的字體。
查看全部 -
CSS3選擇器 :read-write選擇器
“:read-write”選擇器剛好與“:read-only”選擇器相反,主要用來(lái)指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。
示例演示
使用“:read-write”選擇器來(lái)設(shè)置不是只讀控件的文本框樣式
input[type="text"]:read-write{
? border:2px solid red;
}
查看全部 -
CSS3選擇器 :read-only選擇器
“:read-only”偽類選擇器用來(lái)指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單點(diǎn)理解就是,元素中設(shè)置了“readonly=’readonly’”
示例演示
通過(guò)“:read-only”選擇器來(lái)設(shè)置地址文本框的樣式。
查看全部 -
CSS3選擇器 ::selection選擇器
示例演示:
通過(guò)“::selection”選擇器,將Web中選中的文本背景變成紅色,文本變成綠色。
HTML代碼:
<p>“::selection”偽元素是用來(lái)匹配突出顯示的文本。瀏覽器默認(rèn)情況下,選擇網(wǎng)站文本是深藍(lán)的背景,白色的字體,</p>
CSS代碼:
::-moz-selection?{ ??background:?red; ??color:?green; } ::selection?{ ??background:?red; ??color:?green; }
結(jié)果演示:
注意:
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 選擇器。
2、Firefox 支持替代的 ::-moz-selection。
查看全部 -
CSS3選擇器 :checked選擇器
在表單元素中,單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。(大家都知道,要覆寫(xiě)這兩個(gè)按鈕默認(rèn)樣式比較困難)。在CSS3中,我們可以通過(guò)狀態(tài)選擇器“:checked”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。而“:checked”表示的是選中狀態(tài)。
查看全部 -
CSS3選擇器 :enabled選擇器
在Web的表單中,有些表單元素有可用(“:enabled”)和不可用(“:disabled”)狀態(tài),比如輸入框,密碼框,復(fù)選框等。在默認(rèn)情況之下,這些表單元素都處在可用狀態(tài)。那么我們可以通過(guò)偽選擇器“:enabled”對(duì)這些表單元素設(shè)置樣式。
查看全部 -
CSS3 only-of-type選擇器
“:only-of-type”
選擇器用來(lái)選擇一個(gè)元素是它的父元素的唯一一個(gè)相同類型的子元素。這樣說(shuō)或許不太好理解,換一種說(shuō)法。“:only-of-type”
是表示一個(gè)元素他有很多個(gè)子元素,而其中只有一種類型的子元素是唯一的,使用“:only-of-type”選擇器就可以選中這個(gè)元素中的唯一一個(gè)類型子元素。通過(guò)“:only-of-type”選擇器來(lái)修改容器中僅有一個(gè)元素
查看全部 -
CSS3 only-child選擇器
“
:only-child
”選擇器選擇的是父元素中只有一個(gè)子元素,而且只有唯一的一個(gè)子元素。也就是說(shuō),匹配的元素的父元素中僅有一個(gè)子元素,而且是一個(gè)唯一的子元素。示例演示
通過(guò)“:only-child”選擇器,來(lái)控制僅有一個(gè)子元素的背景樣式,為了更好的理解,我們這個(gè)示例通過(guò)對(duì)比的方式來(lái)向大家演示。
HTML代碼:
<div?class="post">???<p>我是一個(gè)段落</p>???<p>我是一個(gè)段落</p>?</div>?<div?class="post">???<p>我是一個(gè)段落</p>?</div>
CSS代碼:
.post?p?{???background:?green;???color:?#fff;???padding:?10px;?}?.post?p:only-child?{???background:?orange;?}
演示結(jié)果:
查看全部 -
CSS3 nth-last-of-type(n)選擇器
“
:nth-last-of-type(n)
”選擇器和“:nth-of-type(n)
”選擇器是一樣的,選擇父元素中指定的某種子元素類型,但它的起始方向是從最后一個(gè)子元素開(kāi)始,而且它的使用方法類似于上節(jié)中介紹的“:nth-last-child(n)
”選擇器一樣。查看全部 -
CSS3 last-of-type選擇器
“
:last-of-type
”選擇器和“:first-of-type
”選擇器功能是一樣的,不同的是他選擇是父元素下的某個(gè)類型的最后一個(gè)子元素
。查看全部 -
CSS3 nth-of-type(n)選擇器
“
:nth-of-type(n)
”選擇器和“:nth-child(n)
”選擇器非常類似,不同的是它只計(jì)算父元素中指定的某種類型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類型的子元素時(shí),使用“:nth-of-type(n)”選擇器來(lái)定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣,可以是具體的整數(shù),也可以是表達(dá)式,還可以是關(guān)鍵詞。查看全部 -
CSS3 first-of-type選擇器
“:first-of-type”選擇器類似于“:first-child”選擇器,不同之處就是指定了元素的類型,其主要用來(lái)定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素。
/*我要改變第一個(gè)段落的背景為橙色*/.wrapper?>?p:first-of-type?{ ??background:?orange; }
查看全部 -
CSS3 結(jié)構(gòu)性偽類選擇器—nth-last-child(n)
“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似,只是這里多了一個(gè)“l(fā)ast”,所起的作用和“:nth-child(n)”選擇器有所區(qū)別,從某父元素的最后一個(gè)子元素開(kāi)始計(jì)算,來(lái)選擇特定的元素。
查看全部 -
CSS3 結(jié)構(gòu)性偽類選擇器—nth-child(n)
“:nth-child(n)”選擇器用來(lái)定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素。其中“n”是其參數(shù),而且可以是整數(shù)值(1,2,3,4),也可以是表達(dá)式(2n+1、-n+5)和關(guān)鍵詞(odd、even),但參數(shù)n的起始值始終是1,而不是0。也就是說(shuō),參數(shù)n的值為0時(shí),選擇器將選擇不到任何匹配的元素。
經(jīng)驗(yàn)與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個(gè)表達(dá)式時(shí),其中n是從0開(kāi)始計(jì)算,當(dāng)表達(dá)式的值為0或小于0的時(shí)候,不選擇任何匹配的元素。如下表所示:
查看全部
舉報(bào)