-
CSS3 結構性偽類選擇器—last-child
“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器，
ul>li:last-child{background:blue;}CSS3 結構性偽類選擇器—last-child
“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器，
ul>li:last-child{background:blue;}查看全部 -
CSS3 結構性偽類選擇器—first-child
“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。
示例演示
通過“:first-child”選擇器定位列表中的第一個列表項，并將序列號顏色變?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;?}演示結果：
查看全部 -
CSS3 結構性偽類選擇器—target
:target選擇器稱為目標選擇器，用來匹配文檔(頁面)的url的某個標志符的目標元素。我們先來上個例子，然后再做分析。多個url（多個target）處理：
就像上面的例子，#brand與后面的id="brand"是對應的，當同一個頁面上有很多的url的時候你可以取不同的名字，只要#號后對的名稱與id=""中的名稱對應就可以了。
如下面例子：
html代碼： ?<h2><a?href="#brand">Brand</a></h2> <div?class="menuSection"?id="brand"> ??content?for?Brand </div> <h2><a?href="#jake">Brand</a></h2> <div?class="menuSection"?id="jake"> ?content?for?jake </div> <h2><a?href="#aron">Brand</a></h2> <div?class="menuSection"?id="aron"> ????content?for?aron </div>
css代碼：
#brand:target?{ ??background:?orange; ??color:?#fff; }#jake:target?{ ??background:?blue; ??color:?#fff; }#aron:target?{ ??background:?red; ??color:?#fff; }上面的代碼可以對不同的target對象分別設置不的樣式。
查看全部 -
CSS3 結構性偽類選擇器—empty
:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格。示例顯示：
比如說，你的文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制。
div:empty {
? border: 1px solid green;
}
查看全部 -
CSS3 結構性偽類選擇器—root
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。示例演示：
通過“:root”選擇器設置背景顏色
HTML代碼：
<div>:root選擇器的演示</div>
CSS代碼：
:root?{???background:orange;?}演示結果：
“:root”選擇器等同于<html>元素，簡單點說：
:root{background:orange}html {background:orange;}得到的效果等同。
查看全部 -
CSS3 結構性偽類選擇器—root
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。示例演示：
通過“:root”選擇器設置背景顏色
HTML代碼：
<div>:root選擇器的演示</div>
CSS代碼：
:root?{???background:orange;?}演示結果：
“:root”選擇器等同于<html>元素，簡單點說：
:root{background:orange}html {background:orange;}得到的效果等同。
查看全部 -
CSS3選擇器 屬性選擇器
?實例展示：
html代碼：
<a?href="xxx.pdf">我鏈接的是PDF文件</a> <a?href="#"?class="icon">我類名是icon</a> <a?href="#"?title="我的title是more">我的title是more</a>
css代碼??
a[class^=icon]{ ??background:?green; ??color:#fff; } a[href$=pdf]{ ??background:?orange; ??color:?#fff; } a[title*=more]{ ??background:?blue; ??color:?#fff; }?結果顯示：
查看全部 -
CSS3背景 background-size
設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size:?auto?|?<長度值>?|?<百分比>?|?cover?|?contain
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現(xiàn)如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數(shù)值，當設置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
查看全部 -
CSS3背景 background-clip
用來將背景圖片做適當?shù)牟眉粢赃m應實際需要。
語法：
background-clip?：?border-box?|?padding-box?|?content-box?|?no-clip
參數(shù)分別表示從邊框、或內填充，或者內容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數(shù)border-box顯示同樣的效果。
backgroud-clip默認值為border-box。效果如下圖所示：
查看全部 -
text-overflow:?ellipsis; overflow:?hidden; white-space:?nowrap;
查看全部 -
background-image:linear-gradient(to?left,?red,?orange,yellow,green,blue,indigo,violet);
查看全部 -
Intest
查看全部 -
媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓你的設計根據(jù)用戶終端設備適配對應的樣式。這也是響應式設計中最為關鍵的?？梢哉fResponsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據(jù)設備的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據(jù)用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現(xiàn)特定的頁面風格。
查看全部 -
forwards其實是在動畫結束后一直保持最后一幀的屬性；backwards是在動畫開始之前有個delay時間，在delay時間的時候就把該元素的屬性變成動畫第一幀的屬性，而不是保持原來的屬性。比如動畫是背景年華，原始是黑色背景，而動畫第一幀從紅色的開始，延遲2s，那么播放動畫時，前面2s delay時間背景就已經變成紅色了，而用none的時候就是保持黑色。both就是把forwards和backwards這兩個結合起來。
查看全部 -
以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分數(shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數(shù)值。A為透明度參數(shù)，取值在0~1之間，不可為負值<p><br/></p>查看全部
舉報