您可能已经阅读过“id”、“class”和“选择器”，并且正在使用它们，那么您就犯了选择具有更大灵活性的错误。 本文提到的大多数选择器都遵循CSS3标准，因此它们只能在相应浏览器的最新版本中生效。 你应该把这些记在你聪明的头脑里。
1.*
* {
margin: 0;
padding: 0;
}
在我们研究更高级的选择器之前，我们应该认识一下众所周知的清除选择器。 星号将选择页面上的每个元素。 许多开发人员使用它来清除``和``。 当然练习时可以使用这个，但我不建议在生产环境中使用它。 它给浏览器添加了很多不必要的东西。
“*”也可用于选择元素的所有子元素。
#container * {
border: 1px solid black;
}
它将选择“#”下的所有元素。 当然，如果可以的话我还是不建议你使用它。
演示版
兼容性
2.#X
#container {
width: 960px;
margin: auto;
}
在选择器中使用“#”通过 id 定位元素。 大家平时都是这样使用的，使用的时候还是要非常小心。
你需要问自己：我是否必须为这个元素分配一个 id 才能找到它？
`id` 选择器非常严格，您不能重复使用它。 如果可能，请首先尝试使用标签名称、HTML5 中的新元素或伪类。
演示版
兼容性
3..X
.error {
color: red;
}
这是一个“类”选择器。 它与“id”选择器的不同之处在于它可以定位多个元素。 当您想要设置多个元素的样式时，可以使用“class”。 当您想要修改特定元素时，请使用“id”来定位它。
演示版
兼容性
4.XY
li a {
text-decoration: none;
}
下一个常用的是``选择器。 如果您想更具体地定位元素，可以使用它。 例如，如果您不需要定位所有“a”元素，而只需定位“li”标签下的“a”标签，该怎么办？ 这时候就需要用到``选择器了。
专业提示：如果您的选择器看起来像“XYZA B.error”，那么您就做错了。 时刻提醒自己是否真的需要修改这么多元素。
演示版
兼容性
5.X
a { color: red; }ul { margin-left: 0; }
如果您想定位页面上的所有标签，而不是使用“id”或“class”，这很简单，只需使用类型选择器即可。
演示版
兼容性
6. X: 和 X: 链接
a:link {color:red;}a:visited {color: purple;}
我们使用`:link`伪类来定位所有尚未访问过的链接。
此外，我们还使用`:`来定位所有已访问过的链接。
演示版
兼容性
7.X+Y
ul + p {
color: red;
}
这称为相邻选择器。 它指导选择指定元素的直接后继元素。 上面的示例选择所有“ul”标签后面的第一个段落，并将其颜色设置为红色。
演示版
兼容性
8.X>Y
div#container > ul {
border: 1px solid black;
}
`XY` 和 `X > Y` 之间的区别在于后者命令选择其直接子元素。 看下面的例子：
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child li>
ul>
li>
<li> List Item li>
<li> List Item li>
<li> List Item li>
ul>
div>
`# > ul` 只会选择 `div` 下所有 `id` 为 '' 的直接 `ul` 元素。 它不会在第一个“li”下找到“ul”元素。
由于某些原因，将选择器与子节点组合起来有许多性能优势。 事实上，在 .
演示版
兼容性
9.X~Y
ul ~ p {
color: red;
}
兄弟节点组合选择器与`X+Y`非常相似，但没有那么严格。 `ul + p` 选择器仅选择那些紧跟在指定元素之后的元素。 该选择器将选择目标元素之后的所有匹配元素。
演示版
兼容性
10.X[标题]
a[title] {
color: green;
}
这称为属性选择器。 在上面的例子中，只有具有 title 属性的元素才会被选择。 没有此属性的锚标记将不会被此代码修改。 然后再想一想，如果想过滤得更具体怎么办？ 那…
演示版
兼容性
11. X[href="foo"]
a[href="http://strongme.cn"] {
color: #1f6053; /* nettuts green */}
上面的代码会将href属性值为绿色的锚标签设置为绿色，而其他标签不受影响。
请注意，我们将该值括在双引号中。 然后使用时使用双引号。 如果可能，请使用标准 CSS3 选择器。
这可行，但仍然有点死。 如果不是这个链接，而是一个类似的链接，那么你就必须使用正则表达式。
演示版
兼容性
12. X[href*=""]
a[href*="strongme"] {
color: #1f6053;
}
Tada 正是我们所需要的。 这样就规定了这个值必须出现在锚标签的`href`属性中。 无论是``还是``还是``，都可以选择。
但请记住，这是一个非常广泛的表达方式。 如果锚标记指向不相关的站点，并且您想要更具体的限制，请使用“^”和“$”分别指示字符串的开头和结尾。
演示版
兼容性
13. X[href^="href"]
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
你一定很好奇。 有些网站的锚标记旁边有一个外部链接图标。 我相信你已经看到了这种情况的发生。 这样的设计会清楚地告诉你，你将被重定向到另一个网站。
使用克拉符号可以轻松完成此操作。 它通常用在正则表达式中来标识开头。 如果我们想在锚属性“href”中定位以“http”开头的标签，那么我们可以使用与上面类似的代码。
请注意，我们没有搜索，这没有必要，因为它不包含任何一个。
那么如果我们想找到所有指向图像的锚标签怎么办？ 然后我们使用“&”字符。
演示版
兼容性
14. X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
这次我们再次使用正则表达式`$`来表示字符串的结尾。 这段代码的意思是搜索所有图片链接，或者其他以`.jpg`结尾的链接。 但请记住，这种写法不适用于“gifs”和“pngs”。
演示版
兼容性
15.X[数据-*=“foo”]
a[data-filetype="image"] {
color: red;
}
回到第8项，我们如何选择所有图像类型“png”、“jpeg”、“jpg”、“gif”？ 我们可以使用多个选择器。 向下看：
a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] {
color: red;
}
但这样写很痛苦，而且效率会很低。 另一种方法是使用自定义属性。 我们可以为每个锚点添加一个属性“data-”来指定该链接指向的图像类型。
[html]
图片链接
