CSS选择符
2018-06-24 00:37:05来源：未知 阅读 ()
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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
