CSS选择器总结
最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！
插入样式表的方法有三种：
第一种：外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
第二种：内部样式表
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
第三种：内联样式表
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
CSS基本的选择器有四种，其它复杂的选择器都由这四种组合而成
- 元素选择器（类型选择器）
- id选择器
- 类选择器
- 属性选择器
选择器的基础语法，规则由两个主要的部分构成：选择器，以及一条或多条声明。
//CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } //每条声明由一个属性和一个值组成。 selector {property: value}
1. 元素选择器（类型选择器）
-
h1 {font-family: sans-serif;}
同时也可以为XML文档设置样式：
XML文档：
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note>
CSS样式：
note { font-family:Verdana, Arial; margin-left:30px; } to { font-size:28px; display: block; } from { font-size:28px; display: block; } heading { color: red; font-size:60px; display: block; } body { color: blue; font-size:35px; display: block; }
2.id选择器
id 属性只能在每个 HTML 文档中出现一次！
HTML代码：
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
CSS样式：
#red {color:red;} #green {color:green;}
3.类选择器
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
CSS样式：
.center {text-align: center}
4.属性选择器
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
为了更准确的定位HTML元素并对其添加样式，在上面四种基础选择器上面，CSS选择器还可以分成：分组选择器，派生选择器，后代选择器，子元素选择器，相邻兄弟选择器，伪类和伪元素。
*1.分组选择器
/* no grouping */ h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* grouping */ h1, h2, h3, h4, h5, h6 {color:blue;}
*2.派生选择器
派生选择器是通过依据元素在其位置的上下文关系来定义样式的。
HTML代码：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
CSS代码：
li strong { font-style: italic; font-weight: normal; }
*3.后代选择器
后代选择器又称包含选择器，可以选择某元素的任意一代的后代元素。
HTML代码：
<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>
CSS代码：
h1 em {color:red;}
*4.子元素选择器
子元素选择器只可选择某元素第一代后代的选择器。
HTML代码：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
CSS代码：
h1 > strong {color:red;}
*5.相邻兄弟选择器
相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。
eg1:
HTML代码：
<h1> <h2>This is a heading<h2> <strong>This will be styled.</strong> <strong>This will not be styled.</strong> <h1>
CSS代码：
h2 + strong {color:red;}
- 语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。
- 在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个<strong>而不会选到第二个<strong>.
eg2:
HTML代码：
<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>
CSS代码：
li + li {color:red;}
- 在以上的例子中li+li是选择紧挨着li后面的第一个<li>，所以第一个<li>不会被选择；而第二个<li>是紧挨着第一个li的，所有会被选择；第三个<li>是紧挨着第二个<li>的，也会被选择。
*6伪类
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用：
selector.class : pseudo-class {property: value}
| 属性 | 描述 |
| :active | 向被激活的元素添加样式。 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
| :link | 向未被访问的链接添加样式。 |
| :visited | 向已被访问的链接添加样式。 |
| :first-child | 向元素的第一个子元素添加样式。 |
| :lang | 向带有指定 lang 属性的元素添加样式。 |
超链接例子：
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
*7伪元素
| 属性 | 描述 |
| :first-letter | 向文本的第一个字母添加特殊样式。 |
| :first-line | 向文本的首行添加特殊样式。 |
| :before | 在元素之前添加内容。 |
| :after | 在元素之后添加内容。 |
