一、父元素选择器
CSS父元素选择器使用时,用于选择元素的父元素。当选择子元素时,可以使用这个选择器来对父元素进行样式设置。
父元素选择器的选择符使用一个空格,例如:
父元素选择器{ 属性1:值1; 属性2:值2; }
在以下HTML代码中,我们可以使用父元素选择器来为li标签的父元素ul添加样式:
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
CSS代码:
ul { background-color: #eee; padding: 10px; } li { color: #333; }
通过父元素选择器,我们可以将原本应用于所有li元素的样式统一应用于它们的父元素,如下所示:
ul { background-color: #eee; padding: 10px; } ul li { color: #333; }
二、CSS元素选择器
CSS元素选择器使用标签名作为选择器,它可以选取文档中所有符合条件的元素,并为其设置相应的样式属性。
例如,在以下HTML代码中,我们使用元素选择器为所有h1标签设置样式:
<h1>标题一</h1> <h1>标题二</h1> <h1>标题三</h1>
CSS代码:
h1 { color: red; }
三、CSS兄弟元素选择器
CSS兄弟元素选择器用于对同一个父元素下的兄弟元素进行选择。
例如,在以下HTML代码中,我们使用兄弟元素选择器来为紧接在input元素后的p元素设置样式:
<div> <label>用户名:</label> <input type="text" name="username"> <p>请输入用户名</p> </div>
CSS代码:
input + p { color: red; }
以上CSS代码会选择input元素紧接着后面的p元素,并将其文本颜色设置为红色。
四、CSS元素选择器不包括
CSS元素选择器不包括使用伪类选择器在指定元素之外定义样式。
例如,在以下HTML代码中,我们使用元素选择器选择所有的p元素,但不选择第一个p元素:
<div> <p>第一个段落</p> <p>第二个段落</p> <p>第三个段落</p> </div>
CSS代码:
p:not(:first-of-type) { color: red; }
以上CSS代码会将第二和第三个p元素的文本颜色设为红色。
五、CSS选择器子元素选择器
CSS选择器子元素选择器是指直接子元素选择器,它可以选择某个元素下的一个特定子元素。
例如,在以下HTML代码中,我们使用子元素选择器为div元素下的第一个p元素设置样式:
<div> <p>第一个段落</p> <p>第二个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> </ul> </div>
CSS代码:
div > p:first-child { color: red; }
以上CSS代码会将第一个p元素的文本颜色设为红色。
六、CSS选择父级元素
CSS选择父级元素,即使用伪类:has()选择某个元素下的特定父元素并设置其样式属性。
例如,在以下HTML代码中,我们使用选择父级元素的方法为所有包含ul元素的li元素背景色设为#eee:
<ul> <li>列表项1</li> <li>列表项2 <ul> <li>子列表项1</li> <li>子列表项2</li> </ul> </li> <li>列表项3</li> </ul>
CSS代码:
li:has(ul) { background-color: #eee; }
以上CSS代码会将包含ul元素的li元素的背景色设为#eee。
七、CSS父类选择器
CSS父类选择器,即使用选择器A B的形式,表示选择器B是选择器A的后代元素。
例如,在以下HTML代码中,我们使用父类选择器为div元素下的所有p元素设置样式:
<div> <p>第一个段落</p> <p>第二个段落</p> </div>
CSS代码:
div p { color: red; }
以上CSS代码会将所有div元素内的p元素的文本颜色设为红色。
八、CSS根据子级找父级元素
CSS根据子级找父级元素是在后代选择器和父元素选择器的结合中,为了选择最外层的元素而使用的方法。
例如,在以下HTML代码中,我们使用根据子级找父级元素的方法为第一个ul元素中的所有li元素设置样式:
<div> <ul> <li>列表项1</li> <li>列表项2</li> </ul> <ul> <li>列表项3</li> <li>列表项4</li> </ul> </div>
CSS代码:
div > ul:first-child li { color: red; }
以上CSS代码会将第一个ul元素内的li元素的文本颜色设为红色。
九、CSS子元素选择父元素
CSS子元素选择父元素是指选择子元素时影响到它的父元素。我们可以使用子元素选择器为下级元素设置样式,同时也能影响到更上层元素。
例如,在以下HTML代码中,我们使用子元素选择器为div元素下的第一个p元素设置样式,并将其上层div元素的背景色设为#eee:
<div> <p>第一个段落</p> <p>第二个段落</p> </div>
CSS代码:
div > p:first-child { color: red; } div { background-color: #eee; }
以上CSS代码会将第一个p元素的文本颜色设为红色,并将其上层div元素的背景色设为#eee。