在CSS中，选择器是用来定位和选择HTML元素的工具。以下是一些常用的选择器及其兼容性：
1. 通用选择器(*)
```css
*{
margin: 0;
padding: 0;}
```
这个选择器会选中页面上的所有元素，并清除它们的margin和padding。虽然在练习时可以使用，但不建议在生产环境中使用，因为它会给浏览器增加不必要的负担。* 也可以用来选择某个元素的所有子元素。
兼容性：IE6+、Firefox、Chrome、Safari、Opera。
2. ID选择器(#X)
```css
#container {
width: 960px;
margin: auto;}
```
在选择器中使用#可以用id来定位某个元素。需要谨慎使用，确保必须为该元素赋值一个id来定位它。id选择器是严格的，无法复用。如果可能的话，首先尝试使用标签名、HTML5中的新元素或伪类。
兼容性：IE6+、Firefox、Chrome、Safari、Opera。
3. 类选择器(.X)
```css
.error {
color: red;}
```
类选择器可以定位多个元素。当需要对多个元素进行样式修饰时使用class,而要对特定元素进行修饰时使用id。
兼容性：IE6+、Firefox、Chrome、Safari、Opera。
4. 后代选择器(X Y)
```css
li a {
text-decoration: none;}
```
后代选择器用于更具体地定位元素。例如，如果你只需要定位li标签下的a标签，而不是所有的a元素，可以使用后代选择器。
专家提示：避免使用像X Y Z A B.error这样的选择器，时刻提醒自己是否真的需要对那么多元素进行修饰。
兼容性：IE6+、Firefox、Chrome、Safari、Opera。
5. 属性选择器(X)
```css
a { color: red; }
ul { margin-left: 0; }
```
要定位页面上所有的某标签，不是通过id或者是'class',可以使用类型选择器。以下是不同浏览器的兼容性：
1. 颜色选择器：
```css
a:link {color:red;}
a:visited {color: purple;}
```
2. 相邻选择器：
```css
ul + p {
color: red;}
```
3. 直接子元素选择器：
```css
div#container > ul {
border: 1px solid black;}
```
4. 子节点组合选择器(性能优势):
```css
ul ~ p {
color: red;}
```
兄弟节点组合选择器(X+Y)与属性选择器相似，但不完全相同。前者仅选择紧邻指定元素的元素，而后者则选择紧跟在目标元素后面的所有匹配元素。以下是一些兼容性较好的浏览器：
- IE7+
- Firefox
- Chrome
- Safari
- Opera
1. X[title] 选择器：选择具有 title 属性的元素。例如：
```css
a[title] {
color: green;
}
```
2. X[href="foo"] 选择器：选择 href 属性值为 "foo" 的锚点标签。例如：
```css
a[href="http://strongme.cn" rel="external nofollow" target="_blank"] {
color: #1f6053; /* nettuts green */
}
```
注意：在使用 JavaScript 时，需要将值用双引号括起来。尽量使用标准的 CSS3 选择器。
3. X[href="strongme"] 选择器：选择 href 属性值为 "strongme" 的锚点标签。例如：
```css
a[href="strongme"] {
color: #1f6053;
}
```
4. X[href^="href"] 选择器：选择 href 属性值以 "href" 开头的锚点标签。例如：
```css
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
```
以下是重构后的内容：
## 伪类选择器
### 1. `X[href$=".jpg"]`
- 在链接中查找以`.jpg`结尾的文件名。
- 颜色设置为红色。
- 支持的浏览器：IE7+、Firefox、Chrome、Safari、Opera。
- 示例代码：
```css
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {
color: red; }
```
### 2. `X[data-*="foo"]`
- 在元素上查找具有`data-*`属性值为`foo`的元素。
- 颜色设置为红色。
- 支持的浏览器：IE7+、Firefox、Chrome、Safari、Opera。
- 示例代码：
```css
a[data-filetype="image"] {
color: red; }
```
### 3. `X[foo~="bar"]`
- 在元素上查找属性值包含`bar`的元素。
- 示例代码：
```html
```
- 颜色设置为红色。
- 支持的浏览器：IE9+、Firefox、Chrome、Safari、Opera。
- 示例代码：
```css
a[data-info~="external"] {
color: red;}
a[data-info~="image"] {
border: 1px solid black;}
```
### 4. `X:checked`
- 定位被选中的单选框和多选框。
- 支持的浏览器：IE9+、Firefox、Chrome、Safari、Opera。
以下是根据您提供的内容重构的代码：
```css
.clearfix {
display: inline-block;
}
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix:hover {
background: #e3e3e3;
}
a:hover {
border-bottom: 1px solid black;
text-decoration: underline;
}
div:not(#container) {
color: blue;
}
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
```
兼容性如下：
- IE8+, Firefox, Chrome, Safari, Opera。
- X:hover 在鼠标飘过锚点链接时为元素添加下边框。
以下是重构后的内容：
## 兼容性
- IE6+
- Firefox
- Chrome
- Safari
- Opera
### 22. `nth-child`
`li:nth-child(3)` {
color: red;
}
`nth-child` 选择器可以很正确地代替第16个TIP,不同的就是它是从结尾处开始的，倒回去的。
兼容性：IE9+、Firefox3.5+、Chrome、Safari。
### 23. `nth-last-child`
`li:nth-last-child(2)` {
color: red;
}
这个技巧可以很正确的代替第16个TIP,不同的就是它是从结尾处开始的，倒回去的。
兼容性：IE9+、Firefox3.5+、Chrome、Safari、Opera。
### 24. `nth-of-type`
`ul:nth-of-type(3)` {
border: 1px solid black;
}
曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。
`nth-of-type` 选择器可以根据元素的类型进行选择。
兼容性：IE9+、Firefox3.5+、Chrome、Safari。
### 25. `nth-last-of-type`
`ul:nth-last-of-type(3)` {
border: 1px solid black;
}
`nth-last-of-type` 选择器可以选择到最后一个指定类型的元素。
兼容性：IE9+、Firefox3.5+、Chrome、Safari、Opera。
### 26. `first-child`
`ul li:first-child` {
border-top: none;
}
这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。假设有个列表，每个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。
兼容性：IE7+、Firefox、Chrome、Safari、Opera。
以下是重构后的内容：
```css
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
li:only-child {
color: red;
}
div p:only-child {
color: red;
}
div {
margin-bottom: 10px;
}
p + ul li:last-child {
font-weight: bold;
}
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
```
兼容性：IE9+, Firefox, Chrome, Safari, Opera。
Opera
结论：如果你需要在旧版本浏览器(如IE6)上使用新的选择器，那么在使用这些新特性时需要小心谨慎。不要让IE6阻止你学习新的技能，这样做对你来说并不公平。在实际开发中，要多查阅兼容性列表，或者使用Dean Edward的优秀IE9.js脚本来实现对这些特性的支持。此外，在与jQuery结合使用时，尽量使用原生的CSS3选择器，这样可以提高代码的执行速度。这是因为选择器引擎可以使用浏览器自带的解析器，而不是选择器自身的解析器。
