CSS选择器用于选择HTML文档中的元素,是使用CSS进行网页布局和样式设计的基础。下面是一个CSS选择器入门教程:

1. 基础选择器

• 元素选择器:直接使用元素名称,如 div、p、h1 等。
• id选择器:使用#标识,如 #header 表示id为header的元素。
• 类选择器:使用.标识,如 .title 表示class为title的元素。

1. 层级选择器

• 后代选择器:用空格分隔,匹配嵌套元素,如 div p 表示 div 内的所有p元素。
• 子元素选择器:使用 > 分隔,只选择作为直接子元素,如 div > p 表示 div 的直接p子元素。
• 相邻兄弟选择器:用 + 连接,如 h1 + p表示h1后紧挨的第一个p元素。
• 通用兄弟选择器:用 ~ 连接,如 h1 ~ p 表示h1后面所有p元素。

1. 属性选择器:根据特定属性选择,如 [target] 表示所有带target属性的元素。
2. 伪类选择器:根据特殊状态选择,如 :hover,:focus 等。
3. 多选择器:可将多个选择器组合在一起,以逗号分隔。

多练习使用各种选择器组合,便可以熟练控制网页元素的样式。 Chrome浏览器内置了调试工具,可以实时检查选择的结果。