-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)于“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)衡和取舍,而不是一味地認為某種方法是完全無用的垃圾。
由于文章內(nèi)容篇幅有限,今天的內(nèi)容就分享到這里,文章結(jié)尾,我想提醒您,文章的創(chuàng)作不易,如果您喜歡我的分享,請別忘了點贊和轉(zhuǎn)發(fā),讓更多有需要的人看到。同時,如果您想獲取更多前端技術(shù)的知識,歡迎關(guān)注我,您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容,敬請期待。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。