css 选择器

元素选择器

元素选择器：基本选择器

类型选择器

类型选择器：元素选择器，又称类型选择器

通配符选择器

*{    padding：0；    margin：0；}

所有元素的分组选择器

css类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
结合元素选择器

<p class="import"></p><h1 class=”import"></h1>p.important {color:red;}h1.important {color:blue;}

css 多类选择器

<p class="import wranning"></p>.import{font-weight:blod;}.wranning{font-style:italic;}.import .wranning{background:silver;}

重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。

id选择器

• 不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

• 同一文档中仅能出现一个ID

• 大小写敏感

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

*[title] {color:red;}

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

为了将同时有 href 和 title 属性的 HTML 超链接的文本

a[href][title] {color:red;}

可以采用一些创造性的方法使用这个特性，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

注意：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

<planet>Venus</planet><planet moons="1">Earth</planet><planet moons="2">Mars</planet>

根据具体属性值选择
假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a><a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a><a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

同样地，XML 语言也可以利用这种方法来设置样式。
下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

<planet>Venus</planet><planet moons="1">Earth</planet><planet moons="2">Mars</planet>

注意：属性与属性值必须完全匹配
请考虑一下的标记片段：

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class=”important”]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

注意：如果忽略了波浪号，则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说，p.important 和 p[class=”important”] 应用到 HTML 文档时是等价的。
那么，为什么还要有 “~=” 属性选择器呢？因为它能用于任何属性，而不只是 class。
例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

img[title~="Figure"] {border: 1px solid gray;}