css 各种选择器 |css查找子节点

/* 选择ID为“example”的元素 */
#example {
color: red;
}
/* 选择所有的段落元素 */
p {
font-size: 18px;
}
/* 选择包含class为“my-class”的元素 */
.my-class {
background-color: blue;
}
/* 选择所有的h1元素和具有“important”class的元素 */
h1, .important {
font-weight: bold;
}

除了这些，还有其他类型的选择器，例如后代选择器、相邻兄弟选择器、属性选择器等。通过这些选择器，可以很方便地选取页面上的不同元素。

/* 后代选择器：选择“container”下的所有p元素 */
.container p {
margin: 10px;
}
/* 相邻兄弟选择器：选择.h1和.p的下一个兄弟元素*/
.h1 + .p {
color: blue;
}
/* 属性选择器：选择具有href属性的a元素 */
a[href] {
text-decoration: none;
}

需要注意的是，选择器的性能不同，有些选择器会导致较慢的渲染速度。因此，选择器应该尽可能地简单且减少使用。如果需要使用复杂的选择器，可以考虑使用id或class来标识元素，而不是一层层地选择它们。