第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

animation-direction屬性主要用來設(shè)置動(dòng)畫播放方向，其語(yǔ)法規(guī)則如下：

animation-direction:normal?|?alternate?[,?normal?|?alternate]*

其主要有兩個(gè)值：normal、alternate

1、normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；

2、另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

::before和::after這兩個(gè)主要用來給元素的前面或后面插入內(nèi)容，這兩個(gè)常和"content"配合使用，使用的場(chǎng)景最多的就是清除浮動(dòng)。

“:read-write”選擇器剛好與“:read-only”選擇器相反，主要用來指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。

:read-only”偽類選擇器用來指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單點(diǎn)理解就是，元素中設(shè)置了“readonly=’readonly’”

示例演示

通過“:read-only”選擇器來設(shè)置地址文本框的樣式。

HTML代碼：

<form?action="#">
??<div>
????<label?for="name">姓名:</label>
????<input?type="text"?name="name"?id="name"?placeholder="大漠"?/>
??</div>
??<div>
????<label?for="address">地址:</label>
????<input?type="text"?name="address"?id="address"?placeholder="中國(guó)上海"?readonly="readonly"?/>
??</div>
</form>

CSS代碼：

form?{
??width:?300px;
??padding:?10px;
??border:?1px?solid?#ccc;
??margin:?50px?auto;
}
form?>?div?{
??margin-bottom:?10px;
}

input[type="text"]{
??border:?1px?solid?orange;
??padding:?5px;
??background:?#fff;
??border-radius:?5px;
}

input[type="text"]:-moz-read-only{
??border-color:?#ccc;
}
input[type="text"]:read-only{
??border-color:?#ccc;
}

結(jié)果演示

“::selection”偽元素是用來匹配突出顯示的文本(用鼠標(biāo)選擇文本時(shí)的文本)。瀏覽器默認(rèn)情況下，用鼠標(biāo)選擇網(wǎng)頁(yè)文本是以“深藍(lán)的背景，白色的字體”顯示的，效果如下圖所示：

從上圖中可以看出，用鼠標(biāo)選中“專注IT、互聯(lián)網(wǎng)技術(shù)”、“純干貨、學(xué)以致用”、“沒錯(cuò)、這是免費(fèi)的”這三行文本中，默認(rèn)顯示樣式為：藍(lán)色背景、白色文本。

有的時(shí)候設(shè)計(jì)要求,不使用上圖那種瀏覽器默認(rèn)的突出文本效果，需要一個(gè)與眾不同的效果，此時(shí)“::selection”偽元素就非常的實(shí)用。不過在Firefox瀏覽器還需要添加前綴。

::-moz-selection?{
??background:?red;
??color:?green;
}
::selection?{
??background:?red;
??color:?green;
}

通過“:checked”狀態(tài)來自定義復(fù)選框效果。

input[type="checkbox"]?+?span?{
??opacity:?0;
}

input[type="checkbox"]:checked?+?span?{
??opacity:?1;
}

“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設(shè)置“disabled”屬性。

在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復(fù)選框等。在默認(rèn)情況之下，這些表單元素都處在可用狀態(tài)。那么我們可以通過偽選擇器“:enabled”對(duì)這些表單元素設(shè)置樣式。

示例演示

通過“:enabled”選擇器，修改文本輸入框的邊框?yàn)?像素的紅色邊框，并設(shè)置它的背景為灰色。

HTML代碼:

<form?action="#">
??<div>
????<label?for="name">Text?Input:</label>
????<input?type="text"?name="name"?id="name"?placeholder="可用輸入框"??/>
??</div>
???<div>
????<label?for="name">Text?Input:</label>
????<input?type="text"?name="name"?id="name"?placeholder="禁用輸入框"??disabled="disabled"?/>
??</div>
</form>

CSS代碼：

div{
??margin:?20px;
}
input[type="text"]:enabled?{
??background:?#ccc;
??border:?2px?solid?red;
}

結(jié)果演示

“:only-of-type”是表示一個(gè)元素他有很多個(gè)子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個(gè)元素中的唯一一個(gè)類型子元素。

“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最后一個(gè)子元素開始，而且它的使用方法類似于上節(jié)中介紹的“:nth-last-child(n)”選擇器一樣。

“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個(gè)類型的最后一個(gè)子元素。

“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計(jì)算父元素中指定的某種類型的子元素。當(dāng)某個(gè)元素中的子元素不單單是同一種類型的子元素時(shí)，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數(shù)也一樣，可以是具體的整數(shù)，也可以是表達(dá)式，還可以是關(guān)鍵詞。

“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素。

示例演示：

通過“:first-of-type”選擇器，定位div容器中的第一個(gè)p元素（p不一定是容器中的第一個(gè)子元素），并設(shè)置其背景色為橙色。

HTML代碼：

<div?class="wrapper">
??<div>我是一個(gè)塊元素，我是.wrapper的第一個(gè)子元素</div>
??<p>我是一個(gè)段落元素，我是不是.wrapper的第一個(gè)子元素，但是他的第一個(gè)段落元素</p>
??<p>我是一個(gè)段落元素</p>
??<div>我是一個(gè)塊元素</div>
</div>

CSS代碼：

.wrapper?{
??width:?500px;
??margin:?20px?auto;
??padding:?10px;
??border:?1px?solid?#ccc;
??color:?#fff;
}
.wrapper?>?div?{
??background:?green;
}
.wrapper?>?p?{
??background:?blue;
}/*我要改變第一個(gè)段落的背景為橙色*/.wrapper?>?p:first-of-type?{
??background:?orange;
}

演示結(jié)果：

“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個(gè)“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個(gè)子元素開始計(jì)算，來選擇特定的元素。

“:nth-child(n)”選擇器用來定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素。其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達(dá)式(2n+1、-n+5)和關(guān)鍵詞(odd、even)，但參數(shù)n的起始值始終是1，而不是0。也就是說，參數(shù)n的值為0時(shí)，選擇器將選擇不到任何匹配的元素。

經(jīng)驗(yàn)與技巧:當(dāng)“:nth-child(n)”選擇器中的n為一個(gè)表達(dá)式時(shí)，其中n是從0開始計(jì)算，當(dāng)表達(dá)式的值為0或小于0的時(shí)候，不選擇任何匹配的元素。如下表所示：

案例演示

? 通過“:nth-child(n)”選擇器，并且參數(shù)使用表達(dá)式“2n”，將偶數(shù)行列表背景色設(shè)置為橙色。

HTML代碼：

<ol>
??<li>item1</li>
??<li>item2</li>
??<li>item3</li>
??<li>item4</li>
??<li>item5</li>
??<li>item6</li>
??<li>item7</li>
??<li>item8</li>
??<li>item9</li>
??<li>item10</li>
</ol>

CSS代碼：

ol?>?li:nth-child(2n){
??background:?orange;
}

演示結(jié)果：