基本选择器包括标签选择器、类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成
##标签选择器
示例:
<style type="text/css"> p{ font-size:12px; color:red; } </style>
类选择器
标签选择器虽然方便,但是也存在缺陷,因为每个标签选择器所定义的样式不仅仅影响某一个特定对象,而且会影响到页面中所有同名的标签。
类选择器可以为网页对象定义不同的样式类,实现不同元素拥有相同的样式、相同的元素拥有不同的样式。
类选择器以一个"."为前缀开头,让后跟随一个自定义的类名
如图:
示例1:
<!doctype html> <html> <head> <style type="text/css"> p{ font-size: 12px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; color: aqua; } </style> <meta charset="utf-8"> <title>示例</title> </head> <body> <p>问君能有几多愁,恰似一江春水向东流</p> <p>剪不断,理还乱,是离愁,别是一番滋味在心头</p> <p>独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间</p> </body> </html>
运行结果:
示例2:
示例3:
<!doctype html> <html> <head> <style type="text/css"> p{ font-size: 12px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; color: aqua; } .font18px{font-size: 18px;} .underline{text-decoration: underline;} .italic{font-style: italic;} </style> <meta charset="utf-8"> <title>示例</title> </head> <body> <p class="underline">问君能有几多愁,恰似一江春水向东流</p> <p class="font18px">剪不断,理还乱,是离愁,别是一番滋味在心头</p> <p class="italic">独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间</p> </body> </html
类选择器可以精确控制界面中的每一个对象样式,而不管这个对象属于是什么类型的标签,同一个类样式可以被多个对象引用,也不管这个对象是属于什么类型的标签。
通过类选择器指定的标签范围,能够更精确的控制页面元素的样式,避免类样式对于所有元素的影响。
<!doctype html> <html> <head> <style type="text/css"> p{ font-size: 12px; color:brown; } .font18px{font-size: 18px;} .underline{text-decoration: underline;} .italic{font-style: italic;} p.font18px{/*指定段落的类样式*/font-size: 24px;} </style> <meta charset="utf-8"> <title>示例</title> </head> <body> <div class="font18px">问君能有几多愁,恰似一江春水向东流</div> <p class="font18px">剪不断,理还乱,是离愁,别是一番滋味在心头</p> <p class="italic">独自莫凭栏,无限江山,别时容易见时难。流水落花春去也,天上人间</p> </body> </html>