CSS迭代選擇器是指通過選擇器對一個元素及其子元素進行樣式設置,簡單來說,就是通過選擇器的嵌套來實現對多個元素的樣式設置。
常見的迭代選擇器包括:
/* 子選擇器 */ ul >li { color: red; } /* 后代選擇器 */ ul li { color: blue; } /* 通配符選擇器 */ * { margin: 0; padding: 0; }
一、子選擇器(child selector)
子選擇器的作用是選擇某個元素的直接子元素,用“>”符號表示。
/* 選擇ul元素下所有直接的li元素 */ ul > li { color: red; }
二、后代選擇器(descendant selector)
后代選擇器的作用是選擇某個元素下所有的子元素,包括直接子元素和子元素的子元素等等,用空格符號表示。
/* 選擇ul元素下所有的li元素 */ ul li { color: blue; }
三、通配符選擇器(universal selector)
通配符選擇器的作用是選擇全部元素,用“*”表示。
/* 設置所有元素的外邊距和內邊距為0 */ * { margin: 0; padding: 0; }
總結:
使用迭代選擇器能夠提高CSS的代碼復用性,使樣式表更加簡潔易懂,但是過多的嵌套也可能會影響瀏覽器的性能,所以在使用中需要謹慎。