css基本层次选择器代码实例

CSS基本层次选择器可以用来选择某个元素的子元素或祖先元素，让我们来看看一些基本的代码实例：

/* 选取子元素 */ul li {
    background-color: yellow;
}
/* 选取后代元素 */div p {
    font-size: 16px;
}
/* 选取相邻兄弟元素 */h2 + p {
    color: blue;
}
/* 选取下一个兄弟元素 */a ~ span {
    font-weight: bold;
}
    

这些代码实例中，我们可以看到不同的层次选择器：

• 子元素选择器：选择某个元素的子元素。上面的代码选取了所有ul下的li元素，设置它们的背景颜色为黄色。
• 后代元素选择器：选择某个元素下的所有后代元素。上面的代码选取了所有div下的p元素，设置它们的字体大小为16px。
• 相邻兄弟元素选择器：选择某个元素后面的相邻兄弟元素。上面的代码选取了所有h2后面紧跟的p元素，将它们的字体颜色设为蓝色。
• 下一个兄弟元素选择器：选择某个元素后面所有的兄弟元素。上面的代码选取了所有a后面的span兄弟元素，将它们的字重设为粗体。

使用CSS层次选择器，可以让我们更精确地选择需要样式化的元素，让页面更加美观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！