/* 选择器类型示例代码 */ /* 1. 标签选择器 */ p { font-size: 16px; } /* 2. ID选择器 */ #main { width: 600px; } /* 3. 类选择器 */ .btn { background-color: blue; } /* 4. 属性选择器 */ a[target="_blank"] { color: red; } /* 5. 后代选择器 */ .container p { margin-top: 10px; } /* 6. 子元素选择器 */ ul >li { list-style-type: none; } /* 7. 相邻兄弟选择器 */ h2 + p { font-style: italic; }
以上是CSS中常用的7种选择器类型,在实际应用中还有其他的选择器类型,如伪类选择器和伪元素选择器等。
根据不同的选择器类型,大家可以使用不同的选择器表达式,例如:
/* 标签选择器表达式 */ a {} /* ID选择器表达式 */ #main {} /* 类选择器表达式 */ .btn {} /* 属性选择器表达式 */ [target="_blank"] {} /* 后代选择器表达式 */ .container p {} /* 子元素选择器表达式 */ ul >li {} /* 相邻兄弟选择器表达式 */ h2 + p {}
选择器类型的灵活组合,可以帮助大家更加高效地编写CSS,同时也可以让页面的样式更加多样化,让用户体验更加丰富。