我們需要達到的效果:
需要什麼
1張的, 2張的, 3張的樣式各不相同。可以使用js完成子元素的判斷,但是這裡我使用css來完成
核心知識點
使用css選擇器完成子元素的判斷
例子:用css選擇器匹配只有乙個元素
div
}很好理解:div下面即是最後乙個元素也是第乙個元素不就是只有乙個子元素嗎?
用css選擇器匹配只有兩個子元素
div}
依樣畫瓢:最後第二個元素也是第二個元素不jjqhtgemm就代表,這個div下只有兩個元素嗎
完成樣式
html部分
}
}www.cppcns.comight">
}
css部分
.box
}.bottom
}.content
&:last-child:nth-child(1) }}
}本文標題: 用css完成根據子元素不同書寫樣式的方法
本文位址:
div根據父元素根據子元素高度自適應高度
切圖時經常遇見一種問題 父級的div高度為0,導致後面緊跟著的元素串位。特別是在使用bootstrap布局的時候 以前都是通過該margin調整 兩種情況 無特殊說明子元素都是指代父元素的第一級子元素 第一種 若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題.第二種 若子元素全是帶有...
CSS根據元素的屬性來選擇元素
css 2 引入了屬性選擇器。屬性選擇器可以根據元素的屬性及屬性值來選擇元素。如果希望選擇有某個屬性的元素,而不論屬性值是什麼,可以使用簡單屬性選擇器。如果您希望把包含標題 title 的所有元素變為紅色,可以寫作 title 與上面類似,可以只對有 href 屬性的錨 a 元素 應用樣式 a hr...
css子元素繼承父元素屬性
樣例 ant design form表單中label樣式的修改 css屬性繼承 文字 color 顏色,a元素除外 direction 方向 font 字型 font family 字型系列 font size 字型大小 font style 用於設定斜體 font variant 用於設定小型大寫...