2016-10-28
《CSS入门经典》第五章
以下提示注意事项：
1.如何选择使用id选择符还是class选择符：当确信id选择符在页面的唯一性时，就可以使用id选择符。
2.通用选择符在所有元素上设置样式，并不是只设置继承的默认值。
eg：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>笔记</title>
6 <style>
7 *{
8 color: green;
9 }
10 h1{
11 color: blue;
12 }
13 </style>
14 </head>
15 <body>
16 <h1>This is <em>very</em> important</h1>
17 </body>
18 </html>
注意：使用通用选择符，<em>标签里的内容显示为绿色，而不是<h1>标签的蓝色，它没有继承h1标签的样式。
更改代码：
1 <style>
2 body{
3 color: green;
4 }
5 h1{
6 color: blue;
7 }
8 </style>
此时em继承了h1的样式。
3.注意后代选择器与子选择器的区别。（另总结）
4.简单伪类：
（1）：active 被激活的元素（例如激活的链接）。
（2）：first-child 元素的第一个子元素。
（3）：focus 有焦点的元素（例如接收输入的表单字段）。
（4）：hover 指向的元素（例如通过鼠标）。
（5）：lang（） 特定语言的样式。
（6）：link 未跟踪的链接。
（7）：visited 以前访问过的链接。
注意：
(1) 将伪类和其他的类和伪类放在一起使用时，中间不要留空格，只有.和:指示符。
eg a.offsite:link{color:green;}
(2) link伪类和visited伪类经常一起使用，用link伪类设置链接未访问时的样式，用visited设置链接访问后的样式。
(3) ：first-child伪类用于选择元素，选择的元素是另一个元素的第一个子代。如果第一个子代匹配选择符的基本类型。（：first-child 伪类前面的部分），那么将规则应用于该元素。
eg:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>笔记</title>
6 <style>
7 body{
8 color: green;
9 }
10 h1{
11 color: blue;
12 }
13 #content p:first-child{
14 background-color: silver;
15 font-size: x-large;
16
17 }
18 </style>
19 </head>
20 <body>
21 <h1>李白</h1>
22 <div id="content">
23 <p>明月出天山，苍茫云海间。
24 长风几万里，吹度玉门关。
25 汉下白登道，胡窥青海湾。
26 由来征战地，不见有人还。
27 戍客望边邑，思归多苦颜。
28 高楼当此夜，叹息未应闲。</p>
29 <p>...</p>
30 <p>...</p>
31 </div>
32 </body>
33 </html>
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 选择器 | chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>
ie7.0以前的浏览器是不支持first-child选择器的，所以使用class给特定元素设置样式。
（4）：lang（）伪类
指示规则应用于匹配某种语言的元素；
eg：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>笔记</title>
6 <style>
7 :lang(en-uk) {
8 background-color: #ccccff;
9 };
10 </style>
11 </head>
12 <body>
13 <p>He cried out in a bad Monty Python imitation,
14 <span lang="en-uk">He's pinin for the fjords!</span>
15 </p>
16 </body>
17 </html>
5.CSS中的伪元素
：before 插入元素前的内容
：after 插入元素后的内容
：first-letter 块元素的第一个字母
：first-line 块元素的第一行
（1）：first-line伪元素是虚拟伪元素，它只添加应用于首行的特殊样式指示元素的首行。
eg：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>笔记</title>
6 <style>
7 p:first-line{
8 background-color: green;
9 }
10 </style>
11 </head>
12 <body>
13 <p>《蝴蝶效应》是一部由埃里克·布雷斯、J·麦凯伊·格鲁伯执导，艾什顿·库彻、艾米·斯马特、约翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻惊悚电影，
于2004年1月23日在美国正式上映。电影讲述伊万（艾什顿·库奇 饰）在小时候经历了一系列糟糕的事情，损坏了他原本完美的人生。
在童年可怕记忆的折磨下，伊万请求心理医生的帮助，医生鼓励他把发生的事情一件件详细记下来，但是事情变得越来越糟糕。
14 </p>
15 </body>
16 </html>
注意：当浏览器窗口，字体的大小改变时，设置的css样式同样能适用。所以<span>标签不能复制first-line。因为当它显示在用户浏览器上时，网页作者不知道首行 在哪里结束。
（2）:first-letter伪元素可以为块元素的首个字母添加特定的样式。
eg：
1 <style>
2 p:first-letter{
3 background-color: green;
4 }
5 </style>
更多专业前端知识，请上 【猿2048】www.mk2048.com
