-html 嵌套規(guī)范注意點

1-1塊級元素一般作為大容器，可以嵌套：文本，塊級元素，行內(nèi)元素，行內(nèi)塊元素等；但是，p標簽中不要嵌套div標簽，p，h,等塊級標簽；

1-2-a標簽內(nèi)可以嵌套任意元素，但是，a標簽不能嵌套a標簽；

2-注意點

2-1大標簽嵌套小標簽。是父子；

2-2塊級嵌套行內(nèi)

p標簽不能嵌套嵌套h1~h6；

h1~h6不能嵌套p標簽

一個段落，一個是標題；

3-1-1測試 p標簽不能嵌套div；代碼截圖：

3-1-2 瀏覽器顯示：

小結(jié)，右鍵檢查，顯示瀏覽器自動閉合了兩個p標簽，強制不準p標簽嵌套h1和div標簽；

3-2-1 p標簽嵌套其他標簽，比如

span,b,strong,i,em,s,del,u,ins,ins,small,big,sub,sup;

3-2-2 測試代碼截圖：

瀏覽器截圖：

對比不嵌套圖片和代碼：

小結(jié)，嵌套標簽后瀏覽器顯示正常，檢查圖如下；檢查后，未發(fā)現(xiàn)強制閉合標簽；

4-1 測試a標簽,a標簽不能嵌套a標簽;

代碼截圖：

瀏覽器顯示和瀏覽器檢查截圖：

小結(jié)，當a標簽嵌套a標簽后，顯示瀏覽器點擊檢查后，看到標簽被強制閉合，使其不能被嵌套；

檢查顯示a標簽嵌套h1,div標簽時，顯示正常；

4-2 測試a標簽嵌套其他標簽，代碼和瀏覽器顯示截圖；

瀏覽器檢查截圖

小結(jié)，瀏覽器顯示a標簽嵌套后，文本顯示正常，瀏覽器檢查正常，無強制閉合；

a標簽嵌套標簽后，所有字體變成藍色，點擊后變色，并且，自帶下劃線；

a標簽嵌套標簽后，不會自動換行，需要添加br換行進行對比參照。

載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

今天看了一篇國外的大佬關(guān)于“css嵌套語法”看法的文章，他認為這個語法是完全無用的垃圾，并收到眾多網(wǎng)友的支持，在這里我將這個國外大佬的看法進行了整理，歡迎大家在評論區(qū)探討。

國外大佬的看法

我真的很困惑，就像我對很多人盛贊的熱門時尚廢話一樣，我不明白為什么有人能看到CSS嵌套的價值。在LESS/SASS/SCSS中，它只會使代碼更加混亂，更難以跟蹤和調(diào)試，總之，只會增加更多的步驟和考慮，而沒有任何實際的好處。

但有趣的是，你會看到一些明顯是為了讓它看起來好看而堆疊的例子。你會看到一些垃圾代碼，比如：

.nesting {
    color: hotpink;
    
    >.is {
        color: rebeccapurple;

    >.awesome {
            color: deeppink;
        }
    }
}

當你依賴制表符來保持事情的整潔時，必須不停地查找代碼中實際應(yīng)用的選擇器/組合器規(guī)則...那么優(yōu)勢在哪里呢？

而且，如果你進入像實際的完整代碼庫這樣的東西，它真的會崩潰。每個選擇器字符串使用一個屬性是堆疊的?，F(xiàn)實世界中？即使是像菜單這樣的小東西：

#mainMenu {

 ul {
 
  list-style:none;
 
  li {
   display:inline;
   
   a {
    display:inline-block;
    padding:0.5rem 1rem;
    color:var(--menuColor);
    border-radius:0.5rem;
    transition:background 0.3s, color 0.3s, scale 0.3s;
   }
   
   a:hover,
   a:focus {
    scale:1.2;
    background:var(--menuHoverBg);
    color:var(--menuHoverColor);
   }
   
  }
  
 }
 
}

當你理解偽狀態(tài)時，如果沒有試圖在代碼中找到那些內(nèi)部的錨點而不是在整個代碼并嘗試弄清楚所有的縮進，你怎么知道它們在哪里？那不是清晰的代碼！

相比之下：

#mainMenu ul {
 list-style:none;
}

#mainMenu li {
 display:inline;
}

#mainMenu a {
 display:inline-block;
 padding:0.5rem 1rem;
 color:var(--menuColor);
 border-radius:0.5rem;
 transition:background 0.3s, color 0.3s, scale 0.3s;
}
   
#mainMenu a:hover,
#mainMenu a:focus {
 scale:1.2;
 background:var(--menuHoverBg);
 color:var(--menuHoverColor);
}

這是一千倍更清晰的代碼，因為你不必去尋找父選擇器是什么！每個屬性和值的組合都有完整的聲明，說明它在哪里、是什么和如何應(yīng)用的！規(guī)則越大，越多，就越是如此！

極簡主義和字節(jié)癡迷之間有一種區(qū)別...后者聞起來像是“哇哇眼睛不想打字”的味道，這種情況下，也許應(yīng)該考慮一下你是不是從事錯誤的業(yè)務(wù)。

盡管最熱烈歡呼的人似乎是那些“在每個該死的元素上添加垃圾類”的傻瓜，那么他們從組合器或嵌套中得到了什么效用呢？

這就像他們在尋找LESS / SASS / SCSS這樣的垃圾，以及為什么人們會尋找HTML / CSS框架的1997年實踐的紀念碑一樣。這表明他們對HTML的最基本用法以及CSS與HTML的區(qū)別一無所知。

它肯定不會提高代碼的清晰度。

關(guān)于我的看法

以上是這位大佬的看法，以下是我對這個問題的看法，歡迎大家來探討關(guān)于“css嵌套語法”的問題。

我認為這個問題并不是非黑即白的。CSS嵌套語法可以使代碼更具可讀性和易維護性，但如果過度使用，也可能會導致代碼的冗長和可讀性下降。

對于大多數(shù)項目來說，選擇使用CSS嵌套語法還是不使用，應(yīng)該取決于具體情況。在某些情況下，使用CSS嵌套語法可以使代碼更加簡潔和易于理解，而在其他情況下，使用它可能不那么合適。

那么如何選擇呢，以下是我的一些建議：

1. 項目規(guī)模和復(fù)雜度：如果項目規(guī)模較小且樣式較簡單，使用CSS嵌套語法可能會增加代碼的冗長和復(fù)雜度，反而降低了代碼的可讀性。但是，對于大型項目和復(fù)雜樣式，使用CSS嵌套語法可以使代碼更加結(jié)構(gòu)化和易于管理。

2. 開發(fā)團隊的技能水平：如果開發(fā)團隊中的成員都熟悉CSS嵌套語法并且能夠正確使用它，那么使用它可能會使開發(fā)更加高效。但是，如果團隊中的成員不熟悉CSS嵌套語法或者誤用它，那么可能會導致代碼的錯誤和混亂。

3. 個人喜好和項目要求：有些開發(fā)人員喜歡使用CSS嵌套語法，因為它可以使代碼更加優(yōu)雅和易于閱讀。但是，有些項目可能對代碼的性能和可維護性有更高的要求，此時可以考慮不使用CSS嵌套語法。

總之，選擇是否使用CSS嵌套語法應(yīng)該根據(jù)項目的實際需求和開發(fā)團隊的技術(shù)水平來決定。如果正確使用，它可以使代碼更加優(yōu)雅和易于維護，但是過度使用可能會導致代碼的冗長和可讀性下降。我們應(yīng)該根據(jù)項目的實際需求和具體情況進行權(quán)衡和取舍，而不是一味地認為某種方法是完全無用的垃圾。

結(jié)束

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。