了解CSS層疊的意義及其重要性 層疊是CSS的一個基本概念。畢竟，它在名字中就有了，CSS的第一個C - Cascading Style Sheets（層疊樣式表），它一定是一件重要的事情。 它代表什麼意思？ 層疊是指確定應用於頁面上每個元素的屬性的過程或算法。 試圖從定義在各個位置的CSS規則列表中匯總。 它考慮到了： 特定性 重要性 繼承 檔案中的順序 它還負責解決衝突。 對於應用於同一元素的相同屬性的兩個或更多競爭CSS規則，需要根據CSS規範進行進一步處理，以確定應該應用哪個規則。 即使您只有一個CSS文件在頁面上加載，仍然有其他CSS會參與到此過程中。我們有瀏覽器（user agent）的CSS。瀏覽器有一套預設規則，各個瀏覽器之間都不相同。 然後進行您的CSS。 然後瀏覽器應用任何用戶樣式表，這可能也是由瀏覽器擴展應用的。 所有這些規則在渲染頁面時都會參與其中。
了解CSS繼承的含義以及其重要性 當在CSS中的選擇器上設置一些屬性時，這些屬性會被該選擇器的所有子元素繼承。 我說的是一些，因為並不是所有的屬性都表現出這種行為。 這是因為有些屬性被繼承是有意義的。這幫助我們更簡潔地撰寫CSS，因為我們不需要在每個子元素上再次明確設置這些屬性。 而其他一些屬性則更有意義不被繼承。 想想字體：您不需要將 font-family 應用於您網頁的每個標籤。您只需設置 body 標籤的字體，每個子元素都會繼承它和其他屬性。 另一方面，background-color 屬性被繼承很少有意義。 可繼承的屬性 以下是一個可繼承屬性的列表。該列表並不全面，但這些規則通常是您會使用到的最流行的： border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-style font-variant font-weight font-size-adjust font-stretch font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans quotes tab-size text-align text-align-last text-decoration-color text-indent text-justify text-shadow text-transform visibility white-space widows word-break word-spacing 這些資訊取自這篇來自Sitepoint的文章。 強制屬性繼承 如果您有一個默認情況下不繼承的屬性，但在子元素中您希望它繼承，您可以將屬性值設置為特殊關鍵字inherit。 例如： body { background-color: yellow; } p { background-color: inherit; } 強制屬性不繼承 相反，您可能會有一個被繼承的屬性，但您希望它不被繼承。 您可以使用revert關鍵字將其還原。在這種情況下，該值會還原為瀏覽器在其默認樣式表中為其提供的原始值。 在實踐中，這很少被使用，大部分情況下您只需設置另一個值來覆蓋那個繼承的值。 其他特殊值 除了剛才提到的inherit和revert特殊關鍵字之外，您還可以將任何屬性設置為：...
如何在JavaScript中擴展類 JavaScript中的繼承是通過類進行的。 假設你有一個類Animal： class Animal { breathe() { //... } } 所有的動物都會呼吸。我想這可以作為一個通則。 但不是所有的動物都會走路。有些動物可以飛行等。 所以我們可以通過擴展這個類來形成不同的種類，並從基類中繼承breathe()方法，同時提供特定的方法和屬性： class Fish extends Animal { swim() { //... } } class Bird extends Animal { fly() { //... } } 你可以使用new關鍵字實例化一個類的實例，最終得到一個對象： const randomAnimal = new Animal() const hummingbird = new Bird()
了解JavaScript的Object.isPrototypeOf()方法 isPrototypeOf()是在一個物件實例上調用的，它接受一個物件作為參數。如果你調用isPrototypeOf()的物件出現在傳入的物件的原型鏈中，它將返回true，否則返回false。 範例： const Animal = { isAnimal: true } const Mammal = Object.create(Animal) Mammal.isMammal = true Animal.isPrototypeOf(Mammal) //true const dog = Object.create(Animal) Object.setPrototypeOf(dog, Mammal) Animal.isPrototypeOf(dog) //true Mammal.isPrototypeOf(dog) //true
在 2015 年，ECMAScript 6 (ES6) 標準引入了類別。這篇文章將教你如何使用類別。 JavaScript 有一種相對不常見的方式來實現繼承：原型繼承。雖然我認為原型繼承是很好的一種方式，但它與其他流行的程式語言實現的繼承方式不同，後者是基於類別的。 來自於 Java、Python 或其他語言的人很難理解原型繼承的細節，因此 ECMAScript 委員會決定在原型繼承的基礎上添加糖衣語法，使其類似於其他流行語言中基於類別的繼承方式。 重要的是：JavaScript 在底層仍然保持相同，你仍然可以以正常的方式訪問對象原型。 類別定義 以下是一個類別的示例： class Person { constructor(name) { this.name = name } hello() { return 'Hello, I am ' + this.name + '.' } } 類別有一個識別符，我們可以使用 new ClassIdentifier() 來創建新對象。 當對象被初始化時，將調用 constructor 方法，並傳入任何參數。 類別可以有任意數量的方法。在這個例子中，hello 是一個方法，可以在所有由這個類別派生的對象上調用： const flavio = new Person('Flavio') flavio.hello() 類別繼承 一個類別可以繼承另一個類別，在使用該類別初始化的對象將繼承兩個類別的所有方法。 如果被繼承的類別和繼承的類別中有同樣名稱的方法，最近的方法將優先執行： class Programmer extends Person { hello() { return super.hello() + ' I am a programmer....