假设存在如下元素：

<p>who am i</p>

---

元素选择器：

一个元素用同一种样式：

p {color:green;
}

多个元素用同一种样式：

p,h1,h2{color:green;
}

所有元素的背景色为黑色：

* {background:black;
}

<div>内所有元素的字体颜色为黑色：

div * {color:black;
}

---

属性选择器：

将一个元素加入一个类，只需要增加属性“class”，并提供一个类名。

<p class="greentea"> who am i<p/>

在CSS中编写属性属性选择器，以下代码会造成所有包含“greentea”属性的p元素字体变绿：

p.greentea{ color:green; 
}

如果希望“greentea”类中所有的元素都有同一种样式：

.greentea{ color:green; 
}

如果要对所有<blockquote>元素做同样处理，可以这样：

blockquote.greentea , p.greentea {color:green;
}

 

---

 id选择器：

首先对p元素增加一个id:

<p id="footer">who am i</p>

选择id为“footer”的任意元素，id是唯一的：

#footer{color:red;
}

选择一个id为“footer”的<p>元素：

P#footer{color:red;
}

 

---

 选择子孙：

选择<div>中的所有子孙<p>元素，<div>是父元素，<p>是子元素，中间有一个空格符。

div p {color:black;
}

选择id为“footer”的元素的所有子孙 <p>元素，footer为父元素id，<p>是子元素，中间有一个空格符。

#footer p{color:black;
}

 选择id为“footer”的元素的直接孩子<p>元素：

#footer>p{color:black;
}

 选择id为“footer”的元素的孩子<p>元素的孩子<blockquote>元素：

#foot p blcokquote{color:blue;
}

 假设有如下两个属性：greentea和blacktea，blacktea属性所在元素 为 greentea属性所在元素的孩子：

<p class="greentea">who am i,<em class="blacktea">do you know</em>
</p>

选择有greentea属性的所有元素中 孩子元素带blacktea 属性的 ，并设置颜色为黑色，中间有一个空格：

.greentea .blacktea{color:black;
}

---

 伪类：

元素 + 冒号，中间没有空格。

未访问状态的链接：

a:link{color:green;
}

已访问的链接：

a:visited{color:red;
}

鼠标悬停在链接上：

a:hover{color:yellow;
}

 焦点在链接上：

a:focus{color:blue;
}

活动状态(用户第一次单击链接时)：

a:active{color:black;
}

 一般的顺序为：link、visited、hover、focus、active。

 

在id为footer的元素中所有未访问的<a>元素指定颜色为青绿色：

#footer a:link{color:#007e7e;
}