最近要进行web前端的开发 所以在w3c school上对js，jqury，css进行了学习和总结；

本文是对于w3c school中css选择器部门的摘录和自己的一些理解；

 CSS选择器

一 元素选择器（类型选择器也适用于xml文档）

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

选择器分组

例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：

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

声明分组

例子1：

h1 {

  font: 28px Verdana;

  color: blue;

  background: red;

  }

例子2：

h1, h2, h3, h4, h5, h6 {

  color:gray;

  background: white;

  padding: 10px;

  border: 1px solid black;

  font-family: Verdana;

  }

 

二 通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

例如，下面的规则可以使文档中的每个元素都为红色：

* {color:red;}

 

三 类选择器

语法 （目标是元素的class属性）

然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：

*.important {color:red;}

例子：

p.important {color:red;}

选择器 p.important 解释为：“其 class 属性值为important 的所有段落”

 

多类选择器

css如下

.important {font-weight:bold;}

.warning {font-style:italic;}

.important.warning {background:silver;}

 

如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

<p class="important warning">

This paragraph is a very important warning.

</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

 

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

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

四ID选择器

在某些方面，ID 选择器类似于类选择器，不过也有一些重要差别。

语法

首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

请看下面的规则：

*#intro {font-weight:bold;}

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro {font-weight:bold;}

这个选择器的效果将是一样的。

第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。

以下是一个实际 ID 选择器的例子：

<p id="intro">This is a paragraph of introduction.</p>

 

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

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

请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

 

 

五 属性选择器

例子 1

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例子 2

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

a[href] {color:red;}

例子 3

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

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

例子 4

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

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

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

根据具体属性值选择.

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

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

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

个人追加：需要注意的是这里的“属性中包含 important 的元素”，指的是属性列表，用空格隔开的那种！比如说有下列三个P元素的class属性分别为

1.   class = “important  warning”  2.class=“importantok” 3. class=“important”

则用下面的语句可以匹配的是1和3；2是不能匹配的！

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

提示：任何属性都可以使用 "~=" 属性选择器。

子串匹配属性选择器

类型

描述

[abc^="def"]

选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]

选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]

选择 abc 属性值中包含子串 "def" 的所有元素

任何属性都可以使用这些选择器。

特定属性选择类型

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

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。

CSS 属性选择器参考手册

选择器

描述

[attribute]

用于选取带有指定属性的元素。

[attribute=value]

用于选取带有指定属性和值的元素。

[attribute~=value]

用于选取属性值中包含指定词汇的元素。

[attribute|=value]

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value]

匹配属性值以指定值开头的每个元素。

[attribute$=value]

匹配属性值以指定值结尾的每个元素。

[attribute*=value]

匹配属性值中包含指定值的每个元素。

 

 

六 后代选择器（又称为包含选择器）

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

 

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

 

七 子元素选择器

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

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

八 相邻兄弟选择器

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

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

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

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

注意：

请看下面这个文档树片段：

<div>

  <ul>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

  </ul>

  <ol>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

  </ol>

</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

个人追加：因为本身这个选择器的第一个li就是一个参考，只不过和他相邻的也是li，则是就可能会造成参考的li也应该变粗的‘假象’，大家在这里应该注意一下；

 

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

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

结果大家自己想吧~嘿嘿；

九 伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性

描述

CSS

:active

向被激活的元素添加样式。

1

:focus

向拥有键盘输入焦点的元素添加样式。

2

:hover

当鼠标悬浮在元素上方时，向元素添加样式。

1

:link

向未被访问的链接添加样式。

1

:visited

向已被访问的链接添加样式。

1

:first-child

向元素的第一个子元素添加样式。

2

:lang

向带有指定 lang 属性的元素添加样式。

2

 

 

 

 

 

 

 

 

 

 

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

提示：为了保证 :first-child 伪类在 IE 中正常工作，必须声明 <!DOCTYPE>。

参见http://www.w3school.com.cn/css/css_pseudo_classes.asp

 

十 伪元素

伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性

描述

CSS

:first-letter

向文本的第一个字母添加特殊样式。

1

:first-line

向文本的首行添加特殊样式。

1

:before

在元素之前添加内容。

2

:after

在元素之后添加内容。

2

参见 http://www.w3school.com.cn/css/css_pseudo_elements.asp