CSS祖先元素是指在HTML中,一個元素所嵌套的其它元素中,其上方的所有元素,包括直接父元素和父元素的父元素等等。
html { font-size: 16px; } body { width: 100%; } header { background-color: #333; color: #fff; padding: 10px; } nav { background-color: #555; color: #fff; padding: 10px; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 10px; } a { color: #fff; text-decoration: none; } main { padding: 20px; }
在這個例子中,我們可以看到在`ul`這個元素中,`li`這個元素是其子元素,而`ul`是`nav`的子元素,`nav`是`header`的子元素,`header`是`body`的子元素,所以`ul`的祖先元素包括其父元素`nav`,爺爺元素`header`和曾祖父元素`body`。我們可以通過CSS來控制這些祖先元素的樣式,例如上方代碼中,我們通過設置`body`的寬度為100%,來使得其祖先元素的寬度也跟隨其變化,達到全局控制布局的效果。