整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          標簽的相互嵌套規(guī)則是怎樣

          -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)容,敬請期待。


          主站蜘蛛池模板: 精品一区狼人国产在线| 国产精品视频一区国模私拍| 中文字幕av日韩精品一区二区| 国语精品一区二区三区| 国产一区在线视频| 久久91精品国产一区二区| 无码少妇一区二区性色AV| 人妻无码一区二区不卡无码av| 乱码精品一区二区三区| 亚洲精品一区二区三区四区乱码| 中文字幕一区在线观看视频| 中文字幕视频一区| 色窝窝免费一区二区三区| 国产91精品一区| 成人一区二区免费视频| 日韩免费无码视频一区二区三区 | 日韩精品一区在线| 日韩一区二区三区视频久久| 国产精品小黄鸭一区二区三区| 亚洲永久无码3D动漫一区| 国产成人综合一区精品| 一区二区中文字幕在线观看| 日本一区午夜艳熟免费| 一区二区无码免费视频网站| 一区二区三区四区无限乱码| 亚洲av午夜福利精品一区| 国产伦精品一区二区三区不卡| 亚洲国产精品成人一区| 亚洲一区二区三区播放在线| 精品人妻一区二区三区四区在线| 久久久久久免费一区二区三区 | 精品国产亚洲第一区二区三区| 亚洲日本一区二区三区在线不卡 | 国产福利电影一区二区三区| 亚洲高清日韩精品第一区| 内射白浆一区二区在线观看| 亚洲视频一区在线观看| 丰满人妻一区二区三区免费视频| 无码少妇A片一区二区三区| 无码一区二区三区| 黄桃AV无码免费一区二区三区|