CSS中常常會遇到前后層級的問題,即不同層級的元素之間如何設置樣式。這里介紹幾種不同的解決方法。
一、后代選擇器
后代選擇器使用空格( )分隔,表示選擇符的后代元素。例如,可以這樣定義一個樣式,將ul元素下所有的li元素的字體顏色設為紅色:
pre{
ul li{
color: red;
}
}
二、子元素選擇器
子元素選擇器使用大于號(>)分隔,指定只選擇父元素的直接子元素。例如,可以這樣定義一個樣式,將ul元素下直接子元素li元素的字體顏色設為藍色:
pre{
ul >li{
color: blue;
}
}
三、鄰居元素選擇器
鄰居元素選擇器使用加號(+)分隔,表示選擇緊隨在某元素之后,同級的下一個元素。例如,可以這樣定義一個樣式,將所有label元素后的第一個input元素的邊框顏色設為紅色:
pre{
label + input{
border-color: red;
}
}
四、相鄰兄弟元素選擇器
相鄰兄弟元素選擇器使用波浪號(~)分隔,表示選擇與某元素相鄰、同級的后續所有元素。例如,可以這樣定義一個樣式,將所有class為foo的元素后的所有相鄰元素的背景顏色設為黃色:
pre{
.foo ~ *{
background-color: yellow;
}
}
以上幾種選擇器可以組合使用,實現更加復雜的選擇。在設計實際項目時,可以根據具體情況選擇合適的選擇器,達到更好的樣式效果。
上一篇cc中如何應用css
下一篇cdn靜態資源css引用