嵌套選擇器在CSS中是一種非常強大的工具,可以操縱HTML元素的子元素,更精確地指定樣式。嵌套選擇器由父元素和子元素組成,可以使用空格分開。
父元素 { 子元素 { 樣式 } }
這種選擇器表示的是,只有在父元素內部的子元素才會受到樣式的影響。下面我們來看幾個實際的例子。
例子1:
這是父元素里的段落。
這也是父元素里的段落。
.parent { background-color: green; p { color: white; } }
這個例子的結果是父元素的背景顏色變成了綠色,所有的段落的文字變成了白色。
例子2:
這是子元素里的段落。
.parent { background-color: green; .child { border: 1px solid black; } .child p { color: white; } }
這個例子的結果是父元素的背景顏色變成了綠色,子元素的邊框變成了黑色,子元素內部的段落的文字變成了白色。
總結一下,使用嵌套選擇器可以更準確地指定元素的樣式。父元素指定的樣式會影響到整個元素和子元素,子元素指定的樣式則只影響到子元素。