一、父元素选择器
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。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/191102.html
微信扫一扫 
支付宝扫一扫 