2、Css中的样式选择器
1、样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)
1）、HTML Selector
2）、Class Selector （需要给要设置样式的元素的class属性赋值）
3）、ID Selector （需要给要设置样式的元素的id属性赋值）
4）、关联选择器 P EM{text-indent:0cm;mso-list:l1 level1 lfo2">5）、组合选择器 <table></table>
6）、伪元素选择器
伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于超链接标签(<a></a>)的正常状态(没有任何动作前)、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义。
代码：class选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /* p { HTML选择器 background-color:red; }*/ p.c1 { background-color:red; } p.c2 { background-color:green; } p.c3 { background-color:yellow; } </style> </head> <body> <p class="c1">今天是我们第一天学习CSS</p> <p class="c1">今天是我们第一天学习CSS</p> <p class="c2">今天是我们第一天学习CSS</p> <p class="c2">今天是我们第一天学习CSS</p> <p class="c3">今天是我们第一天学习CSS</p> <p class="c3">今天是我们第一天学习CSS</p> </body> </html>
代码：ID选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> #p1 { background-color:green; } #p2 { background-color:blue; } </style> </head> <body> <p id="p1">今天是我们第一天学习CSS</p> <p id="p6">今天是我们第一天学习CSS</p> <p id="p2">今天是我们第一天学习CSS</p> <p id="p3">今天是我们第一天学习CSS</p> <p id="p4">今天是我们第一天学习CSS</p> <p id="p5">今天是我们第一天学习CSS</p> </body> </html>
代码：关联选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*em.em1 { background-color:yellow; }*/ /*#em { background-color:green; }*/ p em { background-color:black; } </style> </head> <body> <em>我是em标签</em> <p><em id="em">我是p标签中的em标签</em></p> <p>今天是我们第一天学习CSS</p> <p>今天是我们第一天学习CSS</p> <p>今天是我们第一天学习CSS</p> <p>今天是我们第一天学习CSS</p> <p>今天是我们第一天学习CSS</p> <p>今天是我们第一天学习CSS</p> </body> </html>
代码：伪元素选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> A:active { background-color:yellow; } A:hover { font-size:xx-large; } A:link { /*background-color:pink;*/ } A:visited { color:gray; } P:first-letter { font-size:xx-large; } P:first-line { color:yellow; } </style> </head> <body> <p>床前明月光，疑是地上霜<br/>举头望明月，我叫郭德纲</p> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> </body> </html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /* p { HTML选择器 background-color:red; }*/ p.c1 { background-color:red; } p.c2 { background-color:green; }
p.c3 { background-color:yellow; } </style></head><body> <p class="c1">今天是我们第一天学习CSS</p> <p class="c1">今天是我们第一天学习CSS</p> <p class="c2">今天是我们第一天学习CSS</p> <p class="c2">今天是我们第一天学习CSS</p> <p class="c3">今天是我们第一天学习CSS</p> <p class="c3">今天是我们第一天学习CSS</p></body></html>
