一、CSS元素选择器
h1 {color:black;} p {color:green;}
二、选择器分组
有时候多个元素都需要达成一种样式，就可以通过分组的形式设置，多个元素间通过“,”分隔：
h3, p{text-align:center; color: #fff; }
通配符选择器,可以使文档中每个元素都具备该样式：
*{ margin:0px; text-align:center; }
三、CSS类选择器：
在使用类选择器前，需要修改文档标记，然后通过“.类名”设置：
<html> <head> <style> .setred {color:red;} </style> </head> <body> <h2 class="setred">这是一个红色字体的标题</h2> <p class="setred">这是一段红色字体的段落。</p> </body> </html>
也可以结合元素选择器使用，这样只表示样式仅对该元素该类名的有效：
p.setred {color:red;}
*CSS多类选择器：
有时候文档的某个元素可能具备多个类值（即包含一个词列表，通过空格分隔）：
<p class="important warning"> This paragraph is a very important warning. </p>
<p class="important">
This paragraph is very important.
</p>
<p class="warning">
This paragraph is a warning.
</p>
如果类名important的元素都需要是粗体,类名是warning的需要是斜体。而两者都是的需要是红色字体，则CSS设置如下：
.important {font-weight:bold;} .warning {font-style:italic;} .important.warning{color:red;}
四、ID选择器
<html> <head> <style> #header { font-weight:bold; text-align:center; color:red; border:1px solid blue; } </style> <body> <div id="header"> 我是头部区域. </div> </body> </html>
与类不同，在一个文档中，ID只能唯一。而且对于ID选择器，不能使用词列表的方式。
五、属性选择器
属性选择器可以根据元素的属性名或属性值来选择元素。
1、根据属性名
如果希望选择带有某个属性的元素（而不管其属性值是什么），就可以如下使用属性选择器：
[title] { /*所有带有title属性的元素有效*/ color:red; }
a[href] {
color:blue; /*带有href属性的a标签元素有效*/
}
还可以根据多个属性进行选择，如下为把同时带有href和title属性的a标签元素文本设置为红色：
a[href][title] { color:red; }
2、根据属性值
a[href="http://www.sina.cn"] { color:red; }
同样也可以指定多个带有具体属性值的属性：
a[href="http://www.sina.cn"[title="新浪"] { color:red; }
根据部分属性值选择：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p[class~="important"] { color: red; } </style> </head> <body> <h1>可以应用样式：</h1> <p class="important warning">This is a paragraph.</a> <p class="important">This is a paragraph.</a> <hr /> <h1>无法应用样式：</h1> <p class="warning">This is a paragraph.</a> </body> </html>
六、后代选择器
后代选择器也称为包含选择器，可以选择作为某元素后代的元素来进行指定。
h1 p { /*选择h1内部的p元素*/ color:red; }
后代选择器也可以搭配类选择器、ID选择器等一起使用：
<html> <head> <style> div p {border:1px solid pink;} #div1 p{color:red;} div #p3 {color:blue;} #div3 .p3 {color:green;} </style> </head> <body> <div id="div1"> <p>第一个div内的段落。</p> </div> <div> <p id="p3">第二个div内的段落。</p> </div> <div id="div3"> <p class="p3">第三个div内的段落。</p> </div> </body> </html>
七、CSS子元素选择器
与后代选择器的区别是，子元素选择器只能选择某元素的子元素；而后代选择器可以选择不管隔了多少层的子孙元素。
子元素选择器通过">"来指定子元素。（中间可以使用空格）
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 > strong {color:red;} </style> </head> <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>
八、相邻兄弟选择器
兄弟选择器的使用条件是选择紧接在某一个元素之后的元素，且这两个元素必须有相同的父元素。
p + a{color:red;}
需要注意下例，说明“紧接”的正确理解，ul与ol元素是平行关系的（拥有同一个父元素），虽然ul中还包含了li元素(体现在html代码中为ul后面还有li元素)，但li元素是在ul内部的，还是属于ul元素的。因此这里ol是紧邻着ul的。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> ul + ol {border:1px solid red;} li + li {font-weight:bold;} </style> </head> <body> <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> </body> </html>
结合其他选择器的应用：
div#container > div p + a {color:red;}
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #container > div p + a[title="Baidu"] {color:red;font-family:Verdana;} </style> </head> <body> <div id="container"> <div> <p>紧接该段落的百度链接A的样式有效,B无效.</p> <a href="http://www.baidu.com" title="Baidu">Baidu Link_A</a> <a href="http://www.baidu.com" title="Baidu1">Baidu Link_B</a> </div> <div> <p>紧接该段落的百度链接C、D的样式都无效.</p> <a href="http://www.baidu.com" title="Baidu1">Baidu Link_C</a> <a href="http://www.baidu.com" title="Baidu1">Baidu Link_D</a> </div> </div> </body> </html>
九、CSS伪类
1、锚伪类
<html> <head> <style type="text/css"> a:link {color: black} a:visited {color: red} a:hover {color: pink} a:active {color: green} </style> </head> <body> <p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p> <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p> <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p> </body> </html>
2、:first-child伪类
该伪类可以用来指定作为第一个子元素的元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p:first-child {color:red;} li:first-child {color:green;} </style> </head> <body> <div> <p>这里的段落样式有效.</p> <ul> <li>Intert Key,其实第一个li总会生效</li> <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>这里的段落样式无效。</p> </div> <p><b>注释：</b>必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。</p> </body> </html>
十、CSS伪元素
1、:first-line伪元素
为文本中的首行设置样式。该伪元素只能应用于块级元素。
p:first-line { color: green; }
2、:first-letter伪元素
为文本的首字母设置样式。
<html> <head> <style> p {font-weight:normal;font-family:Verdana;font-size:18px;} p:first-line{color:pink;font-weight:bold;} p:first-letter{color:red;font-size:28px;} </style> </head> <body> <p> You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a special effect to the first line of a text!You can use the :first-line pseudo-element to add a special effect to the first line of a text! </p> </body> </html>