CSS选择器

1.ID和类选择器

.specialtext {font-style: italic;}
p.specialtext {color: red} /* class为specialtext的p元素 */
.specialtext.featured {font-size: 100%;} /* class为specialtext和featured的元素*/

#specialtext {}
p#specialtext {} /* 类比上面 */

2.上下文选择器

p, body {font-size: 10px;} /* p和body */
artical p {font-weight: bold;} /* artical p是上下级关系，但可以越级 */
section > h2 {font-style: italic} /* 父子选择，section必须是h2的直接父元素 */
h2 + p {font-variant: small-caps;} /* 紧邻同胞选择器，p必须紧邻同胞h2后面 */
h2 ~ a {color: red;} /* 一般同胞选择器，不必紧邻 */

3.通用选择器

* {color: green;}
p * {color: red;} /* p包含的所有元素 */
section * a {font-size: 1.3em;} /* section的孙元素的a，不管其父元素*/

4.属性选择器

/* 带有title属性的img元素，至于其title值是什么不重要 */
img[title] {border: 2px solid blue;}

5.属性值选择器

/* title属性为red flower的img元素 */
img[title="red flower"] {border: 4px solid green;}

6.伪类

链接伪类

link: 等待用户点击的状态

visited: 点击过的连接状态

hover: 鼠标悬停在连接上的状态

active: 连接正在被点击（按下还未释放）

p:hover {background-color: grey;}

focus伪类

获得焦点的元素

input:focus {border: 1px solid blue;}

target伪类

链接的目标元素

<a href="#more_info">more information</a>
<h2 id="more_info">This is the information you are looking for.</h2>

#more_info:target {background: #eee;} /* h2元素 */

结构化伪类

:first-child和:last-child
e:first-child
:nth-child
e:nth-child(n) /* n是一个数值，也可以是even，odd */

7.伪元素

e::first-letter /* e的首字符 */
e::first-line /* 首行 */
e::before/after /* 在e前面/后面添加内容 */

比如

<p class-"age">25</p>

p.age::before {content: "Age: ";}
p.age::after {content: " years.";}

得到的结果为：

Age：25 years.