用css完成根據子元素不同書寫樣式的方法

2022-09-20 12:57:21 字數 537 閱讀 2733

我們需要達到的效果:

需要什麼

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 用於設定小型大寫...