以下是一些常用的CSS选择器:
/* 选择ID为demo的元素 */ #demo{ color: red; } /* 选择所有p元素 */ p{ font-size: 16px; } /* 选择所有带有class为text的元素 */ .text{ text-align: center; } /* 选择所有子元素的h1元素 */ div >h1{ font-weight: bold; }
除了常规的选择器,CSS还提供了伪类和伪元素选择器。伪类选择器用于选择特定的状态,例如鼠标悬浮时的样式;伪元素选择器用于选择文档中的某一部分,例如第一行或第一个字母。
/* 鼠标悬浮在链接上时,文字颜色变为红色 */ a:hover{ color: red; } /* 修改第一个字母的样式 */ p::first-letter{ font-size: 24px; color: blue; }
最后,大家还可以通过组合选择器来选择指定的元素。组合选择器允许大家将不同类型的选择器组合在一起,从而更加精确地选择特定的HTML元素。
/* 选择所有带有class为text的div元素内的第一个p元素 */ div.text >p:first-child{ font-weight: bold; font-size: 18px; }
总之,CSS选择器是CSS中不可或缺的一部分,掌握它们可以让大家创建漂亮的网页和用户友好的用户体验。