1. **基本选择器**：
- `*` 通配符选择器：可以匹配任何元素，在需要对页面所有元素设置统一的初始或者重置样式时非常有用。
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
- 元素名选择器（如div、p等）：直接指定 HTML 标签名称来选取相应的标签元素以定义其样式。
css
div {
background-color: #f9f9f9;
}
p {
font-size: 24px;
}
2. **ID 和 类选择器**：
- ID 选择器 (#myId) 可用于具有唯一id特性的元素上，例如 `<h1 id="header">Header</h1>` ，通过 CSS 定义为 `.header {}`
css
#header{
color: red;
text-align:center;
}
- 类选择器 (.className)，针对class特性设定样式的灵活方式，适用于多个相似但不完全相同的元素：
html
<span class="highlighted">Highlighted Text</span>
<em class="highlighted">Also Highlighted</em>
.highlighted {
background-color: yellow;
}
3. **后代/子代选择器**:
后代选择器 (`A B`) 表示 A 的任意后代元素B；而 子代选择器(`A > B`) 则仅限于作为 A 直接孩子的 B 元素。
css
/* 所有位于li内的a链接 */
li a {
color: blue;
}
/* 父级ul下的第一个级别li里的内容 */
ul > li:first-child {
list-style-type:none;
}
4. **伪类选择器**：
如`:hover`, `:active`, `:focus`常用来改变鼠标悬停、激活或获取焦点状态下元素的表现形式。
css
a:hover {
color: green;
cursor:pointer;
}
input:focus {
outline-color: hotpink;
}
5. **结构性伪类选择器**：
这些包括:nth-child(), :nth-of-type()等，可以根据DOM树的位置关系选定元素。
css
tr:nth-child(even){
background-color: lightgrey;
}
article section:last-of-type {
border-bottom-width: 0;
}
6. 属性选择器及值选择器：
使用 `[attr]`,`[att=val]`,`[att^=val],[att$=val],[att*=val]` 来依据元素具有的具体属性及其取值来进行筛选。
css
input[type=text] {
width: 80%;
}
/* 匹配href包含"example.com"的所有a标签*/
a[href*='example.com'] {
color: darkgreen;
}
以上只是部分常用的CSS3选择器类型，实际上还有许多其他的选择器可供利用，比如表单相关伪类(:required,:valid),相邻兄弟选择器(+),一般同胞选择器(~)等等。熟练掌握这些多样化的选择工具可以帮助我们编写出更为高效精确并且易于维护的CSS代码风格。