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

scale為縮放的時(shí)候用到，scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮??；而任何大于或等于1.01的值，作用是讓元素放大。

Skew()具有三種情況：

1、skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；

第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無(wú)斜切。

2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

示例演示：

通過(guò)skew（）函數(shù)將長(zhǎng)方形變成平行四邊形。

HTML代碼：

<div?class="wrapper">
??<div>我變成平形四邊形</div>
</div>

CSS代碼：

.wrapper?{
??width:?300px;
??height:?100px;
??border:?2px?dotted?red;
??margin:?30px?auto;
}
.wrapper?div?{
??width:?300px;
??height:?100px;
??line-height:?100px;
??text-align:?center;
??color:?#fff;
??background:?orange;??-webkit-transform:?skew(45deg);
??-moz-transform:skew(45deg)?
??transform:skew(45deg);}

演示結(jié)果

代碼中有一個(gè)高度?li{height:100%;}???
-ms-transition:?IE10?屬性不存在-ms-?,IE9?不支持transition.

li:not(:last-child)::after{
????content:"";
????position:absolute;
????top:10px;
????right:0;????//居中對(duì)齊
????width:1px;??//分割線的寬度;
????height:30px;?//分隔線的高度;
????background-color:red;??//分隔線的顏色
????/*?其他格式*/
}

使用結(jié)構(gòu)偽類(lèi)選擇器:nth-of-type()

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

.clearfix::before,
.clearfix::after?{
????content:?".";
????display:?block;
????height:?0;
????visibility:?hidden;
}
.clearfix:after?{clear:?both;}
.clearfix?{zoom:?1;}

當(dāng)然可以利用他們制作出其他更好的效果，比如右側(cè)中的陰影效果，也是通過(guò)這個(gè)來(lái)實(shí)現(xiàn)的。

關(guān)鍵代碼分析：

.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;
????border-radius:100px?/?10px;
}

上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個(gè)空元素，然后為這兩個(gè)空元素添加陰影特效。

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

示例演示

通過(guò)“: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;
}

“:only-of-type”選擇器用來(lái)選擇一個(gè)元素是它的父元素的唯一一個(gè)相同類(lèi)型的子元素。這樣說(shuō)或許不太好理解，換一種說(shuō)法?！?only-of-type”是表示一個(gè)元素他有很多個(gè)子元素，而其中只有一種類(lèi)型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個(gè)元素中的唯一一個(gè)類(lèi)型子元素。 示例演示 通過(guò)“:only-of-type”選擇器來(lái)修改容器中僅有一個(gè)div元素的背景色為橙色。 HTML代碼：

“: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é)果：

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

示例演示

通過(guò)“:nth-last-of-type(n)”選擇器將容器“div.wrapper”中的倒數(shù)第三個(gè)段落背景設(shè)置為橙色。

HTML代碼：

<div?class="wrapper">
??<p>我是第一個(gè)段落</p>
??<p>我是第二個(gè)段落</p>
??<p>我是第三個(gè)段落</p>
??<p>我是第四個(gè)段落</p>
??<p>我是第五個(gè)段落</p>
??<div>我是一個(gè)Div元素</div>
??<p>我是第六個(gè)段落</p>
??<p>我是第七個(gè)段落</p>
</div>

CSS代碼：

.wrapper?>?p:nth-last-of-type(3){
??background:?orange;
}

演示結(jié)果：

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

示例演示

通過(guò)“:last-of-type”選擇器，將容器“div.wrapper”中最后一個(gè)段落元素背景設(shè)置為橙色

（提示：這個(gè)段落不是“div.wrapper”容器的最后一個(gè)子元素）。

HTML代碼：

<div?class="wrapper">
??<p>我是第一個(gè)段落</p>
??<p>我是第二個(gè)段落</p>
??<p>我是第三個(gè)段落</p>
??<div>我是第一個(gè)Div元素</div>
??<div>我是第二個(gè)Div元素</div>
??<div>我是第三個(gè)Div元素</div>
</div>

CSS代碼：

?.wrapper?>?p:last-of-type{
??background:?orange;
}

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

示例演示

通過(guò)“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數(shù)段數(shù)的背景設(shè)置為橙色。

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

示例演示：

通過(guò)“: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-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í)候，不選擇任何匹配的元素。如下表所示：

案例演示

“: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í)候，不選擇任何匹配的元素。如下表所示：

案例演示

:first-child”選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素，記住是子元素，而不是后代元素。

示例演示

通過(guò)“:first-child”選擇器定位列表中的第一個(gè)列表項(xiàng)，并將序列號(hào)顏色變?yōu)榧t色。

HTML代碼：

<ol>
??<li><a?href="##">Link1</a></li>
??<li><a?href="##">Link2</a></li>
??<li><a?href="##">link3</a></li>
</ol>

CSS代碼：

ol?>?li{
??font-size:20px;
??font-weight:?bold;
??margin-bottom:?10px;
}

ol?a?{
??font-size:?16px;
??font-weight:?normal;
}

ol?>?li:first-child{
??color:?red;
}