CSS选择器笔记

元素选择器。文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，也可以是 html 本身。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

类型选择器（type selector）。即元素选择器。新标准叫这个，可以设置XML文档中元素的样式。

选择器分组。通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

body, h2, p, table, th, td, pre, strong, em {color:gray;}

通配选择器（universal selector）。显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。

* {color:red;}

声明分组。对声明分组，一定要在各个声明的最后使用分号，这很重要。因为浏览器会忽略样式表中的空白符。

h1 {font: 28px Verdana; color: white; background: black;}

结合选择器分组和声明分组。

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

类选择器。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

*.important {color:red;}

即类名前有一个点号（.），然后结合通配选择器

.important {color:red;}

只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器。

p.important {color:red;}

类选择器结合元素选择器。只有段落显示为红色文本。选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<pre><p <span class="marked">class="important warning"</span>>
This paragraph is a very important warning.
</p>

多类选择器。两个词的顺序无关紧要，写成 warning important 也可以。class 中同时包含 important 和 warning 的所有元素还有一个银色的背景就可以写成上面的样子。不仅是只单单用单background属性，这三个不同的属性都会用到。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

ID 选择器。ID 选择器类似于类选择器，不过也有一些重要差别。首先，ID 选择器前面有一个 # 号。

*#intro {font-weight:bold;}

结合通配选择器

#intro {font-weight:bold;}

忽略通配选择器

区别与联系：与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次（id是为一个元素分配名字，名字唯一，所以在一个文档中不能重复出现）。ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表（一个元素一个名字，就是没有多id选择器）。类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

属性选择器。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

*[title] {color:red;}

属性选择器结合通配选择器。

a[href] {color:red;}

属性选择器结合元素选择器。

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

多属性选择器

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

类也算是一个属性，这是属性选择器的应用，不算类选择器。这是在定义的过程中。在使用的过程中，与类选择器并没有什么区别。

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

这里如果写成p[class="important"]那么这个规则是不能够匹配的，所以这个不能叫多属性选择器。

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

部分属性选择器，如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。这样的话如果class="important warning"的话，也是可以被成功匹配的。如果不带有波浪号，这里就不能够被匹配成功的。但是如果是下面的多类选择器的话，是能够匹配的上的，这是 多类选择器与部分属性选择器的差别。

p.important
{
color: red;
}
<p class="important warning">This is a paragraph.</a>

用部分属性选择器的好处是，假如定义了一个Figure的属性值，然后使用的时候可以有 Figure 1，Figure 2等属性值，这样在写代码的时候清晰。

子串匹配属性选择器。这个是属性选择器的高级版本，有三种模式。[abc^="def"]表示abc属性值是以"def"开头的所有元素。[abc$="def"]表示abc属性值以"def"结尾的所有元素。[abc*="def"]表示abc属性值中包含子串"def"的所有元素。

*[lang|="en"] {color: red;}

特定属性选择器，上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。最常见的用途还是匹配语言值。假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如   figure-1.jpg 和 figure-2.jpg，那么用这个属性就最好了。这样在写代码的时候会清晰易维护。如下面所示。

img[src|="/i/figure"] {border: 1px solid gray;}
<img title="Figure 1" src="/i/figure-1.gif" />
<img title="Figure 2" src="/i/figure-2.gif" />

后代选择器（descendant selector），又称为包含选择器。作用是可以选择作为某元素后代的元素。如果只希望对h1元素中的em元素应用样式，可以这样写：

h1 em {color:red;}

表示h1元素中的子元素<em>的样式会变成红色字体。此时<p>元素中的子元素<em>的样式不会改变。当然也有别的办法，比如在h1中找到的每一个em元素上放一个class属性，但是后代选择器效率更高些。这里，选择器之间的空格是一种结合符 combinator。作用就是包含关系，左边的为父，右边为子。这里两个元素之间的层次间隔是无限的，不一定是直接的父子关系。上面代码中，不论em元素嵌套层次有多深，选择器都能够正确匹配。

子元素选择器（Child Selector）。与后代选择器相比，它只能选择作为某元素子元素的元素。

h1 > strong {color:red;}

这里大于号两边加上空白符也不会改变成为后代选择器的。大于号叫做子结合符。

table.company td > p

后代选择器与子选择器结合，从右往左读，td>p，表示td的直接子元素<p>会匹配该规则。然后是table.company td表示这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

相邻兄弟选择器Adjacent sibling selector。可选择紧接着在另一个元素后的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。如果此时再出现第二个<p>元素，就不会在匹配了。这个加号叫做相邻兄弟结合符，与子选择器一样，相邻兄弟结合符旁边可以有空白符。

li + li {font-weight:bold;}

如果列表中一个列表里有好多<li>标签，那么选择器只会把第二个以后的列表项变为粗体。第一项不受影响。

html > body table + ul {margin-top:20px;}

这个是相邻兄弟选择器，子元素选择器和后代选择器相结合的。选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。（从右往左读）