十天精通CSS3学习笔记 part2
- 第6章 征服CSS3選擇器（上）
屬性選擇器
? ?在HTML中，通過(guò)各種各樣的屬性可以給元素增加很多附加的信息。例如，通過(guò)id屬性可以將不同div元素進(jìn)行區(qū)分。
? ?在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎(chǔ)上對(duì)屬性選擇器進(jìn)行了擴(kuò)展，新增了3個(gè)屬性選擇器，使得屬性選擇器有了通配符的概念，這三個(gè)屬性選擇器與CSS2的屬性選擇器共同構(gòu)成了CSS功能強(qiáng)大的屬性選擇器。如下表所示：
(單擊可放大)
?實(shí)例展示：
html代碼：
<a href="xxx.pdf">我鏈接的是PDF文件</a> <a href="#" class="icon">我類(lèi)名是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; }?
?結(jié)果顯示：
?
結(jié)構(gòu)性偽類(lèi)選擇器—root
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
示例演示：
通過(guò)“:root”選擇器設(shè)置背景顏色
HTML代碼：
<div>:root選擇器的演示</div>CSS代碼：
:root {background:orange; }?
演示結(jié)果：
“:root”選擇器等同于<html>元素，簡(jiǎn)單點(diǎn)說(shuō)：
:root{background:orange}html {background:orange;}?
得到的效果等同。
建議使用:root方法。
另外在IE９以下還可以借助“:root”實(shí)現(xiàn)hack功能。
結(jié)構(gòu)性偽類(lèi)選擇器—not
:not選擇器稱(chēng)為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個(gè)元素之外的所有元素。就拿form元素來(lái)說(shuō)，比如說(shuō)你想給表單中除submit按鈕之外的input元素添加紅色邊框，CSS代碼可以寫(xiě)成：
form {width: 200px;margin: 20px auto; } div {margin-bottom: 20px; } input:not([type="submit"]){border:1px solid red; }相關(guān)HTML代碼：
<form action="#"><div><label for="name">Text Input:</label><input type="text" name="name" id="name" placeholder="John Smith" /></div><div><label for="name">Password Input:</label><input type="text" name="name" id="name" placeholder="John Smith" /></div><div><input type="submit" value="Submit" /></div> </form> ?演示結(jié)果：
結(jié)構(gòu)性偽類(lèi)選擇器—empty
:empty選擇器表示的就是空。用來(lái)選擇沒(méi)有任何內(nèi)容的元素，這里沒(méi)有內(nèi)容指的是一點(diǎn)內(nèi)容都沒(méi)有，哪怕是一個(gè)空格。
示例顯示：
比如說(shuō)，你的文檔中有三個(gè)段落p元素，你想把沒(méi)有任何內(nèi)容的P元素隱藏起來(lái)。我們就可以使用“:empty”選擇器來(lái)控制。
HTML代碼：
<p>我是一個(gè)段落</p> <p> </p> <p></p>?CSS代碼：
p{background: orange;min-height: 30px; } p:empty {display: none; }?演示結(jié)果：
?
結(jié)構(gòu)性偽類(lèi)選擇器—target
:target選擇器稱(chēng)為目標(biāo)選擇器，用來(lái)匹配文檔(頁(yè)面)的url的某個(gè)標(biāo)志符的目標(biāo)元素。我們先來(lái)上個(gè)例子，然后再做分析。
示例展示
點(diǎn)擊鏈接顯示隱藏的段落。
HTML代碼：
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand">content for Brand </div>CSS代碼：
.menuSection{display: none; } :target{/*這里的:target就是指id="brand"的div對(duì)象*/display:block; }演示結(jié)果：
分析：
1、具體來(lái)說(shuō)，觸發(fā)元素的URL中的標(biāo)志符通常會(huì)包含一個(gè)#號(hào)，后面帶有一個(gè)標(biāo)志符名稱(chēng)，上面代碼中是：#brand
2、：target就是用來(lái)匹配id為“brand”的元素（id="brand"的元素）,上面代碼中是那個(gè)div元素。
多個(gè)url（多個(gè)target）處理：
就像上面的例子，#brand與后面的id="brand"是對(duì)應(yīng)的，當(dāng)同一個(gè)頁(yè)面上有很多的url的時(shí)候你可以取不同的名字，只要#號(hào)后對(duì)的名稱(chēng)與id=""中的名稱(chēng)對(duì)應(yīng)就可以了。
如下面例子：
html代碼： ?
css代碼：
#brand:target {background: orange;color: #fff; } #jake:target {background: blue;color: #fff; } #aron:target {background: red;color: #fff; }上面的代碼可以對(duì)不同的target對(duì)象分別設(shè)置不的樣式。
點(diǎn)擊一個(gè)鏈接， div下的p發(fā)生變化：
#brand:target p{color:#fff;background:yellow; }結(jié)構(gòu)性偽類(lèi)選擇器—first-child
“: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; }演示結(jié)果：
結(jié)構(gòu)性偽類(lèi)選擇器—last-child
“:last-child”選擇器與“:first-child”選擇器作用類(lèi)似，不同的是“:last-child”選擇器選擇的是元素的最后一個(gè)子元素。例如，需要改變的是列表中的最后一個(gè)“l(fā)i”的背景色，就可以使用這個(gè)選擇器，
ul>li:last-child{background:blue;}結(jié)構(gòu)性偽類(lèi)選擇器—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í)候，不選擇任何匹配的元素。如下表所示：
案例演示
? 通過(guò)“: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é)果：
?
結(jié)構(gòu)性偽類(lèi)選擇器—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)選擇特定的元素。
first-of-type選擇器
“: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-of-type(n)選擇器
“: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)鍵詞。
CSS3選擇器:nth-child和:nth-of-type之間的差異
示例演示
通過(guò)“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數(shù)段數(shù)的背景設(shè)置為橙色。
HTML代碼：
<div class="wrapper"><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落元素</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div><p>我是一個(gè)段落</p> </div>CSS代碼：
.wrapper > p:nth-of-type(2n){background: orange; }演示結(jié)果：
?
last-of-type選擇器
“?: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; }演示結(jié)果：
nth-last-of-type(n)選擇器
“?: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é)果：
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é)果：
only-of-type選擇器
“?: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代碼：
<div class="wrapper"><p>我是一個(gè)段落</p><p>我是一個(gè)段落</p><p>我是一個(gè)段落</p><div>我是一個(gè)Div元素</div> </div> <div class="wrapper"><div>我是一個(gè)Div</div><ul><li>我是一個(gè)列表項(xiàng)</li></ul><p>我是一個(gè)段落</p> </div>CSS代碼：
.wrapper > div:only-of-type {background: orange; }演示結(jié)果：
- 第7章 征服CSS3選擇器（下）
?
:enabled選擇器
?
在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; }結(jié)果演示
:disabled選擇器
“?:disabled?”選擇器剛好與“?:enabled?”選擇器相反，用來(lái)選擇不可用表單元素。要正常使用“?:disabled?”選擇器，需要在表單元素的HTML中設(shè)置“disabled”屬性。
:checked選擇器
在表單元素中，單選按鈕和復(fù)選按鈕都具有選中和未選中狀態(tài)。（大家都知道，要覆寫(xiě)這兩個(gè)按鈕默認(rèn)樣式比較困難）。在CSS3中，我們可以通過(guò)狀態(tài)選擇器“?:checked?”配合其他標(biāo)簽實(shí)現(xiàn)自定義樣式。而“?:checked?”表示的是選中狀態(tài)。
示例演示：
通過(guò)“?:checked?”狀態(tài)來(lái)自定義復(fù)選框效果。
HTML代碼
<form action="#"> <div class="wrapper"> <div class="box"> <input type="radio" checked="checked" id="boy" name="1" /><span></span> </div> <label for="boy">男</label> </div><div class="wrapper"> <div class="box"> <input type="radio" id="girl" name="1" /><span></span> </div> <label for="girl">女</label> </div> </form>CSS代碼：
.box {display: inline-block;width: 30px;height: 30px;margin-right: 10px;position: relative;background: orange;vertical-align: middle;border-radius: 100%; } .box input {opacity: 0;position: absolute;top:0;left:0;width: 100%;height:100%;z-index:100;/*使input按鈕在span的上一層，不加點(diǎn)擊區(qū)域會(huì)出現(xiàn)不靈敏*/ }.box span { display: block;width: 10px;height: 10px;border-radius: 100%;position: absolute;background: #fff;top: 50%;left:50%;margin: -5px 0 0 -5px;z-index:1; }input[type="radio"] + span {opacity: 0;} input[type="radio"]:checked + span {/*+為兄弟選擇器，代表+兩側(cè)的元素是前后緊鄰的。整體解釋：選擇緊鄰前面的標(biāo)簽為選中的radiobox的span標(biāo)簽 */opacity: 1; }?
結(jié)果演示：
::selection選擇器
“?::selection?”偽元素是用來(lái)匹配突出顯示的文本(用鼠標(biāo)選擇文本時(shí)的文本)。瀏覽器默認(rèn)情況下，用鼠標(biāo)選擇網(wǎng)頁(yè)文本是以“深藍(lán)的背景，白色的字體”顯示的，效果如下圖所示：
從上圖中可以看出，用鼠標(biāo)選中“專(zhuān)注IT、互聯(lián)網(wǎng)技術(shù)”、“純干貨、學(xué)以致用”、“沒(méi)錯(cuò)、這是免費(fèi)的”這三行文本中，默認(rèn)顯示樣式為：藍(lán)色背景、白色文本。
有的時(shí)候設(shè)計(jì)要求,不使用上圖那種瀏覽器默認(rèn)的突出文本效果，需要一個(gè)與眾不同的效果，此時(shí)“?::selection?”偽元素就非常的實(shí)用。不過(guò)在Firefox瀏覽器還需要添加前綴。
示例演示:
通過(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。
:read-only選擇器
“?:read-only?”偽類(lèi)選擇器用來(lái)指定處于只讀狀態(tài)元素的樣式。簡(jiǎn)單點(diǎn)理解就是，元素中設(shè)置了“?readonly=’readonly’?”
示例演示
通過(guò)“?:read-only?”選擇器來(lái)設(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é)果演示
:read-write選擇器
“?:read-write?”選擇器剛好與“?:read-only?”選擇器相反，主要用來(lái)指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。
示例演示
使用“?:read-write?”選擇器來(lái)設(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; }input[type="text"]:-moz-read-write{border-color: #f36; } input[type="text"]:read-write{border-color: #f36; }結(jié)果演示：
::before和::after
?::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è)空元素添加陰影特效。
效果：
全部代碼：
CSS代碼：
.box h3{text-align:center;position:relative;top:80px; } .box {width:70%;height:200px;background:#FFF;margin:40px auto; }.effect{position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .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; }HTML代碼：
<body><div class="box effect"><h3>Shadow Effect </h3></div> </body>?
轉(zhuǎn)載于:https://www.cnblogs.com/benbendu/p/5823222.html
總結(jié)
以上是生活随笔為你收集整理的十天精通CSS3学习笔记 part2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 动画--过渡属性 transition-
- 下一篇： 使用日志记录功能查看PHP扩展的执行过程