[計(jì)算機(jī)]CSS選擇器筆記

1、.CSS選擇器筆記一、基本選擇器序 號(hào)選擇器含義1.* 通用元素選擇器，匹配任何元素2.E標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素3.infoclass選擇器，匹配所有class屬性中包含info的元素4. #footer id選擇器，匹配所有id屬性等于footer的元素實(shí)例：* margin:0; padding:0; p font-size:2em; .info background:#ff0; background:#ff0; .error color:#900; font-weight:bold; #info background:#ff0; p#info ba

2、ckground:#ff0; 二、多元素的組合選擇器序 號(hào)選擇器含義5. E,F多元素選擇器，同時(shí)匹配所有E元素或F元素，E和F之間用逗號(hào)分隔6. E F后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔7.E > F子元素選擇器，匹配所有E元素的子元素F8.E + F毗鄰元素選擇器，匹配所有緊隨E元素之后的同級(jí)元素F實(shí)例：div p color:#f00; #nav li display:inline; #nav a font-weight:bold; div > strong color:#f00; p + p color:#f00; 三、CSS 2.1 屬性

3、選擇器序 號(hào)選擇器含義9. Eatt匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“cheacked”。以下同。）10.Eatt=val 匹配所有att屬性等于“val”的E元素11.Eatt=val 匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“val”的E元素12.Eatt|=val 匹配所有att屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以“val” 開(kāi)頭的E元素，主要用于lang屬性，比如“en”、“en-us”、“en-gb”等等實(shí)例：ptitle color:#f00; divclass=error color

4、:#f00; tdheaders=col1 color:#f00; plang|=en color:#f00; blockquoteclass=quotecite color:#f00; 四、CSS 2.1中的偽類序 號(hào)選擇器含義13.E:first-child 匹 配父元素的第一個(gè)子元素14.E:link 匹配所有未被點(diǎn)擊的鏈接15.E:visited 匹配所有已被點(diǎn)擊的鏈接16.E:active 匹 配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素17.E:hover 匹配鼠標(biāo)懸 停其上的E元素18.E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素19.E:lang(c) 匹配lang屬性等于c的E元素實(shí)例

5、：p:first-child font-style:italic; inputtype=text:focus color:#000; background:#ffe; inputtype=text:focus:hover background:#fff; q:lang(sv) quotes: "201D" "201D" "2019" "2019" 五、 CSS 2.1中的偽元素序 號(hào)選擇器含義20.E:first-line匹配E元素的第一行21. E:first-letter匹配E元素的第一個(gè)字母22.E:befo

6、re在E元素之前插入生成的內(nèi)容23.E:after在E元素之后插入生成的內(nèi)容實(shí)例：p:first-line font-weight:bold; color;#600; .preamble:first-letter font-size:1.5em; font-weight:bold; .cbb:before content:"" display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; a:link:after content: &quo

7、t; (" attr(href) ") " 六、CSS 3的同級(jí)元素通用選擇器序 號(hào)選擇器含義24.E F 匹配 任何在E元素之后的同級(jí)F元素實(shí)例：p ul background:#ff0; 七、CSS 3 屬性選擇器序 號(hào)選擇器含義25.Eatt=”val” 屬 性att的值以"val"開(kāi)頭的元素26.Eatt$=”val” 屬 性att的值以"val"結(jié)尾的元素27.Eatt*=”val” 屬 性att的值包含"val"字符串的元素實(shí)例：divid="nav" background

8、:#ff0; 八、CSS 3中與用戶界面有關(guān)的偽類序 號(hào)選擇器含義28.E:enabled 匹配表單中激活的元素29.E:disabled匹配表單中禁用的元素30.E:checked匹配表單中被選中的radio（單項(xiàng)選擇框）或checkbox（復(fù)選框）元素31.E:selection 匹配用戶當(dāng)前選中的元素實(shí)例：inputtype="text":disabled background:#ddd; 九、CSS 3中的結(jié)構(gòu)性偽類序 號(hào)選擇器含義32. E:root 匹 配文檔的根元素，對(duì)于HTML文檔，就是HTML元素33.E:nth-child(n)匹配其父元素的第n個(gè)子元素

9、，第一個(gè)編號(hào)為134.E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為135.E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素36. E:nth-last-of-type(n)與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素37.E:last-child匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)38.E:first-of-type匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)39.E:last-of-type 匹配父元素下使

10、用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)40.E:only-child匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)41.E:only-of-type匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)42. E:empty匹配一個(gè)不包含任何子元素的元素，注意，文本節(jié)點(diǎn)也被看作子元素實(shí)例：p:nth-child(3) color:#f00

11、; p:nth-child(odd) color:#f00; p:nth-child(even) color:#f00; p:nth-child(3n+0) color:#f00; p:nth-child(3n) color:#f00; tr:nth-child(2n+11) background:#ff0; tr:nth-last-child(2) background:#ff0; p:last-child background:#ff0; p:only-child background:#ff0; p:empty background:#ff0; 十、CSS 3的反選偽類序 號(hào)選擇器含義4

12、3.E:not(s) 匹 配不符合當(dāng)前選擇器的任何元素實(shí)例：:not(p) border:1px solid #ccc; 十一、CSS 3中的 :target 偽類序 號(hào)選擇器含義44.E:target匹配文檔中特定"id"點(diǎn)擊后的效果請(qǐng)參看HTML DOG上關(guān)于該選擇器的詳細(xì) 解釋和實(shí)例。Javascript 面向?qū)ο缶幊蹋ㄒ唬悍庋b下面就是我的學(xué)習(xí)筆記，希望對(duì)大家學(xué)習(xí)這個(gè)部分有所幫助。我主要參考了Object-Oriented JavaScript和Professional JavaScript for Web Developers (2nd Edition)這兩本書(shū)。

13、它們都是非常優(yōu)秀的 Javascript讀物，推薦閱讀。筆記分成兩部分。今天的第一部分是討論"封裝"（Encapsulation），下一次的第二部分討論"繼承"（Inheritance）。=Javascript 面向?qū)ο缶幊蹋ㄒ唬悍庋b作者：阮一峰Javascript是一種基于對(duì)象（object-based）的語(yǔ)言，你遇到的所有東西幾乎都是對(duì)象。但是，它又不是一種真正的面向?qū)ο缶幊?（OOP）語(yǔ)言，因?yàn)樗恼Z(yǔ)法中沒(méi)有class（類）。那么，如果我們要把"屬性"（property）和"方法"（method），封裝成一

14、個(gè)對(duì)象，甚至要從原型對(duì)象生成一個(gè)實(shí)例對(duì)象，我們應(yīng)該怎么做 呢？1. 生成對(duì)象的原始模式假定我們把貓看成一個(gè)對(duì)象，它有"名字"和"顏色"兩個(gè)屬性。var Cat = name : '',color : '' 現(xiàn)在，我們需要根據(jù)這個(gè)原型對(duì)象，生成兩個(gè)實(shí)例對(duì)象。var cat1 = ; = "大毛"cat1.color = "黃色"var cat2 = ; = "二毛"cat2.color = "黑色" 好了，這就

15、是最簡(jiǎn)單的封裝了。但是，這樣的寫(xiě)法有兩個(gè)缺點(diǎn)，一是如果多生成幾個(gè)實(shí)例，寫(xiě)起來(lái)就非常麻煩；二是實(shí)例與原型之間，沒(méi)有任何辦法，可以看 出有什么聯(lián)系。2. 原始模式的改進(jìn)我們可以寫(xiě)一個(gè)函數(shù)，解決代碼重復(fù)的問(wèn)題。function Cat(name,color)return name:name,color:color 然后生成實(shí)例對(duì)象，就等于是在調(diào)用函數(shù)：var cat1 = Cat("大毛","黃色");var cat2 = Cat("二毛","黑色");這種方法的問(wèn)題依然是，cat1和cat2之間沒(méi)有內(nèi)在的聯(lián)系，不能反映

16、出它們是同一個(gè)原型對(duì)象的實(shí)例。3. 構(gòu)造函數(shù)模式為了解決從原型對(duì)象生成實(shí)例的問(wèn)題，Javascript提供了一個(gè)構(gòu)造函數(shù)（Constructor）模式。所謂"構(gòu)造函數(shù)"，其實(shí)就是一個(gè)普通函數(shù)，但是內(nèi)部使用了this 變量。對(duì)構(gòu)造函數(shù)使用new運(yùn)算符，就能生成實(shí)例，并且this變量會(huì)綁定在實(shí)例對(duì)象上。 比如，貓的原型對(duì)象現(xiàn)在可以這樣寫(xiě)，function Cat(name,color)=name;this.color=color; 我們現(xiàn)在就可以生成實(shí)例對(duì)象了。var cat1 = new Cat("大毛","黃色");

17、var cat2 = new Cat("二毛","黑色");alert(); / 大毛alert(cat1.color); / 黃色這時(shí)cat1和cat2會(huì)自動(dòng)含有一個(gè)constructor屬性，指向它們的構(gòu)造函數(shù)。alert(cat1.constructor = Cat); /truealert(cat2.constructor = Cat); /trueJavascript還提供了一個(gè)instanceof運(yùn)算符，驗(yàn)證原型對(duì)象與實(shí)例對(duì)象之間的關(guān)系。alert(cat1 instanceof Cat); /truealert(cat2

18、instanceof Cat); /true 4. 構(gòu)造函數(shù)模式的問(wèn)題構(gòu)造函數(shù)方法很好用，但是存在一個(gè)浪費(fèi)內(nèi)存的問(wèn)題。請(qǐng)看，我們現(xiàn)在為Cat對(duì)象添加一個(gè)不變的屬性"type"（種類），再添加一個(gè)方法eat（吃老鼠）。那么，原型對(duì)象Cat就變成了下面這樣：function Cat(name,color) = name;this.color = color;this.type = "貓科動(dòng)物"this.eat = function()alert("吃老鼠"); 還是采用同樣的方法，生成實(shí)例：var cat1 = new

19、Cat("大毛","黃色");var cat2 = new Cat ("二毛","黑色");alert(cat1.type); / 貓科動(dòng)物cat1.eat(); / 吃老鼠 表面上好像沒(méi)什么問(wèn)題，但是實(shí)際上這樣做，有一個(gè)很大的弊端。那就是對(duì)于每一個(gè)實(shí)例對(duì)象，type屬性和eat()方法都是一模一樣的內(nèi)容，每一次 生成一個(gè)實(shí)例，都必須為重復(fù)的內(nèi)容，多占用一些內(nèi)存。這樣既不環(huán)保，也缺乏效率。alert(cat1.eat = cat2.eat); /false能不能讓type屬性和eat()方法在內(nèi)存中只生成一次，然后

20、所有實(shí)例都指向那個(gè)內(nèi)存地址呢？回答是可以的。 5. Prototype模式 Javascript規(guī)定，每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性，指向另一個(gè)對(duì)象。這個(gè)對(duì)象的所有屬性和方法，都會(huì)被構(gòu)造函數(shù)的實(shí)例繼 承。這意味著，我們可以把那些不變的屬性和方法，直接定義在prototype對(duì)象上。function Cat(name,color) = name;this.color = color;Ctotype.type = "貓科動(dòng)物"Ctotype.eat = function()alert("吃老鼠"); 然

21、后，生成實(shí)例。var cat1 = new Cat("大毛","黃色");var cat2 = new Cat("二毛","黑色");alert(cat1.type); / 貓科動(dòng)物cat1.eat(); / 吃老鼠這時(shí)所有實(shí)例的type屬性和eat()方法，其實(shí)都是一個(gè)內(nèi)存地址，指向prototype對(duì)象，因此就提高了運(yùn)行效率。alert(cat1.eat = cat2.eat); /true 6. Prototype模式的驗(yàn)證方法 6.1 isPrototypeOf() 這個(gè)方法用來(lái)判斷，某個(gè)proptotyp

22、e對(duì)象和某個(gè)實(shí)例之間的關(guān)系。alert(Ctotype.isPrototypeOf(cat1); /truealert(Ctotype.isPrototypeOf(cat2); /true 6.2 hasOwnProperty() 每個(gè)實(shí)例對(duì)象都有一個(gè)hasOwnProperty()方法，用來(lái)判斷某一個(gè)屬性到底是本地屬性，還是繼承自prototype對(duì)象的屬性。alert(cat1.hasOwnProperty("name"); / truealert(cat1.hasOwnProperty("type"); / false 6.

23、3 in運(yùn)算符 in運(yùn)算符可以用來(lái)判斷，某個(gè)實(shí)例是否含有某個(gè)屬性，不管是不是本地屬性。alert("name" in cat1); / truealert("type" in cat1); / truein運(yùn)算符還可以用來(lái)遍歷某個(gè)對(duì)象的所有屬性。for(var prop in cat1) alert("cat1"+prop+"="+cat1prop); （完）上一次的文章，主要介紹了如何" 封裝"數(shù)據(jù)和方法，從原型對(duì)象生成實(shí)例。今天要介紹的是，多個(gè)原型對(duì)象之間如何"繼承"。比

24、如，現(xiàn)在有一個(gè)"動(dòng)物"對(duì)象，function Animal()this.species = "動(dòng)物"還有一個(gè)"貓"對(duì)象，function Cat(name,color) = name;this.color = color;怎樣才能使"貓"繼承"動(dòng)物"呢？1. 原型對(duì)象綁定最簡(jiǎn)單的方法，大概就是使用call或apply方法，將父對(duì)象綁定在子對(duì)象上，也就是在子對(duì)象函數(shù)中加一行：function Cat(name,color)Animal.apply(this, arguments)

25、; = name;this.color = color; var cat1 = new Cat("大毛","黃色");alert(cat1.species); / 動(dòng)物2. prototype模式更常見(jiàn)的做法，則是使用prototype屬性。如果"貓"的prototype對(duì)象，指向一個(gè)Animal的實(shí)例，那么所有"貓"的實(shí)例，就能繼承Animal了。Ctotype = new Animal();Ctotype.constructor = Cat;var cat1 = new

26、 Cat("大毛","黃色");alert(cat1.species); / 動(dòng)物代碼的第一行，我們將Cat的prototype對(duì)象指向一個(gè)Animal的實(shí)例。Ctotype = new Animal();它相當(dāng)于完全刪除了prototype 對(duì)象原先的值，然后賦予一個(gè)新值。但是，第二行又是什么意思呢？Ctotype.constructor = Cat;原來(lái)，任何一個(gè)prototype對(duì)象都有一個(gè)constructor屬性，指向它的構(gòu)造函數(shù)。也就是說(shuō)，Ctotype 這個(gè)對(duì)象的constructor屬性，是指向Cat的

27、。我們?cè)谇耙徊揭呀?jīng)刪除了這個(gè)prototype對(duì)象原來(lái)的值，所以新的prototype對(duì)象沒(méi)有constructor屬性，所以我們必須手動(dòng)加 上去，否則后面的"繼承鏈"會(huì)出問(wèn)題。這就是第二行的意思?？傊?，這是很重要的一點(diǎn)，編程中務(wù)必要遵守。下文都遵循這一點(diǎn)，即如果替換了prototype對(duì)象，totype = ;那么，下一步必然是為新的prototype對(duì)象加上constructor屬性，并將這個(gè)屬性指回原來(lái)的構(gòu)造函數(shù)。totype.constructor = o;3. 直接繼承prototype由于Animal對(duì)象中，不變的屬性都可以直接寫(xiě)入Anima

28、totype。所以，我們也可以讓Cat()跳過(guò) Animal()，直接繼承Atotype。現(xiàn)在，我們先將Animal對(duì)象改寫(xiě)：function Animal() Atotype.species = "動(dòng)物"然后，將Cat的prototype對(duì)象，然后指向Animal的prototype對(duì)象，這樣就完成了繼承。Ctotype = Atotype;Ctotype.constructor = Cat;var cat1 = new Cat("大毛","黃色"

29、;);alert(cat1.species); / 動(dòng)物與前一種方法相比，這樣做的優(yōu)點(diǎn)是效率比較高（不用執(zhí)行和建立Animal的實(shí)例了），比較省內(nèi)存。缺點(diǎn)是 Ctotype和Atotype現(xiàn)在指向了同一個(gè)對(duì)象，那么任何對(duì)Ctotype的修改，都會(huì)反映到 Atotype。所以，上面這一段代碼其實(shí)是有問(wèn)題的。請(qǐng)看第二行Ctotype.constructor = Cat;這一句實(shí)際上把Atotype對(duì)象的constructor屬性也改掉了！alert(Atotype.constructor);

30、 / Cat4. 利用空對(duì)象作為中介由于"直接繼承prototype"存在上述的缺點(diǎn)，所以可以利用一個(gè)空對(duì)象作為中介。var F = function();F.prototype = Atotype;Ctotype = new F();Ctotype.constructor = Cat;F是空對(duì)象，所以幾乎不占內(nèi)存。這時(shí)，修改Cat的prototype對(duì)象，就不會(huì)影響到Animal的prototype對(duì)象。alert(Atotype.constructor); / Animal5. prototype模式的封裝函數(shù)

31、我們將上面的方法，封裝成一個(gè)函數(shù)，便于使用。function extend(Child, Parent) var F = function();F.prototype = Ptotype;Ctotype = new F();Ctotype.constructor = Child;Child.uber = Ptotype;使用的時(shí)候，方法如下extend(Cat,Animal);var cat1 = new Cat("大毛","黃色");alert(cat1.species); / 動(dòng)物這

32、個(gè)extend函數(shù)，就是YUI庫(kù)如何實(shí)現(xiàn)繼承的方法。另外，說(shuō)明一點(diǎn)。函數(shù)體最后一行Child.uber = Ptotype;意思是為子對(duì)象設(shè)一個(gè)uber屬性，這個(gè)屬性直接指向父對(duì)象的prototype屬性。這等于是在子對(duì)象上打開(kāi)一條通道，可以直接調(diào)用父對(duì)象的方 法。這一行放在這里，只是為了實(shí)現(xiàn)繼承的完備性，純屬備用性質(zhì)。6. 拷貝繼承上面是采用prototype對(duì)象，實(shí)現(xiàn)繼承。我們也可以換一種思路，純粹采用"拷貝"方法實(shí)現(xiàn)繼承。簡(jiǎn)單說(shuō)，如果把父對(duì)象的所有屬性和方法，拷貝 進(jìn)子對(duì)象，不也能夠?qū)崿F(xiàn)繼承嗎？首先，還是把Animal的所有不變屬性，都放到它的pro

33、totype對(duì)象上。function Animal()Atotype.species = "動(dòng)物"然后，再寫(xiě)一個(gè)函數(shù)，實(shí)現(xiàn)屬性拷貝的目的。function extend2(Child, Parent) var p = Ptotype;var c = Ctotype;for (var i in p) ci = pi;c.uber = p; 這個(gè)函數(shù)的作用，就是將父對(duì)象的prototype對(duì)象中的屬性，一一拷貝給Child對(duì)象的prototype對(duì)象。使用的時(shí)候，這樣寫(xiě)：extend2(Cat, Animal);var cat

34、1 = new Cat("大毛","黃色");alert(cat1.species); / 動(dòng)物（完）但是，寫(xiě)到一半的時(shí)候，我突然意識(shí)到，Javascript的繼 承有兩種。一種是基于"函數(shù)對(duì)象"的繼承，也就是一個(gè)function去繼承另外一個(gè)function，這個(gè)我已經(jīng)在昨天介紹過(guò)了。另一種則是基于"非函數(shù)對(duì)象"的繼承，不涉及function。它的做法與前一種情況完全不同。一、什么是"非函數(shù)對(duì)象"的繼承？比如，現(xiàn)在有一個(gè)對(duì)象，叫做"中國(guó)人"。var Chinese = na

35、tion:'中國(guó)'還有一個(gè)對(duì)象，叫做"醫(yī)生"。var Doctor =career:'醫(yī)生'請(qǐng)問(wèn)，我怎樣才能讓"醫(yī)生"去繼承"中國(guó)人"，也就是說(shuō)，我怎樣才能生成一個(gè)"中國(guó)醫(yī)生"的對(duì)象？二、object()方法json格式的發(fā)明人Douglas Crockford，提出了一個(gè)object()函數(shù)，可以做到這一點(diǎn)。function object(o) function F() F.prototype = o; return new F(); 這個(gè)object()函數(shù)，其實(shí)只做一件事，就是把子對(duì)象的prototype屬性，指向父對(duì)象，從而使得子對(duì)象與父對(duì)象連在一起。使用的時(shí)候，第一步先在父對(duì)象的基礎(chǔ)上，生成子對(duì)象：var Doctor = object(Chinese);然后，再加上子對(duì)象本身的屬性：Doctor.career = '醫(yī)生'這時(shí)，子對(duì)象已經(jīng)繼承了父對(duì)象的屬性了。alert(Doctor.nation); /中國(guó)三、淺拷貝除了使用"prototype鏈"以外，還有另一種思路：把父對(duì)象的屬性，全部拷貝給子對(duì)象，也能實(shí)現(xiàn)繼承。下面這個(gè)函數(shù)，就是在做拷貝：function extendCopy(p) var