上面的思维导图已经大致将这六种选择器的重要点描述出来了,下面用代码再一一实验一次。
1.HTML选择器(标签选择器)
将需要定义样式的元素作为选择符,在<style>标签中进行样式的定义。
<html> <head> <title>HTML选择器</title> <style> p{ color:red; font-size:1cm; } b{ color:green; font-size:50px; } </style> </head> <body> <p>aaaaaaaaa</p> <b>bbbbbbbb</b> </body> </html>
2.类选择器
(1)同一个元素使用不同的样式
<html> <head> <title>类选择器</title> <style> p{ color:yellow; } p.cls1{ color:red; } p.cls2{ color:green; } p.cls3{ color:blue; } </style> </head> <body> <p>aaaaaaaaaa</p> <p class="cls1">aaaaaaaaaa</p> <p class="cls2">aaaaaaaaaa</p> <p class="cls3">aaaaaaaaaa</p> </body> </html>
(2)去掉[tag],使选择器适用所有元素,同意一个元素可以在单个标签中同时使用多个选择器
<html> <head> <title>类选择器</title> <style> p{ color:yellow; } .cls1{ color:red; } .cls2{ font-size:1cm; border:2px solid green; } .cls3{ color:blue; } </style> </head> <body> <p>aaaaaaaaaa</p> <p class="cls1 cls2">aaaaaaaaaa</p> <a href="http://www.baidu.com" class="cls2">baidu</a><br> <b class="cls3">aaaaaaaaaa</b> </body> </html>
3.ID选择器(一定要注意每个ID属性值在html都是唯一存在的)
<html> <head> <title>ID选择器</title> <style> #first{ color:yellow; } #second{ color:red; } #third{ font-size:1cm; border:2px solid green; } #forth{ color:blue; } </style> </head> <body> <p id="first">aaaaaaaaaa</p> <p id="second">aaaaaaaaaa</p> <a href="http://www.baidu.com" id="third">baidu</a><br> <b id="forth">aaaaaaaaaa</b> </body> </html>
4.关联选择器
<html> <head> <title>关联选择器</title> <style> div #first .two p{ color:red; font-size:2cm; } </style> </head> <body> <div> <div id="first"> <div > <div class="two"> <p>aaaaaaaaaaaa</p> </div> </div> </div> </div> </body> </html>
因为这里涉及到了标签之间的嵌套关系,所以简单提一下样式的继承:
所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式。
实验代码:
<html> <head> <title>样式继承</title> <style> #first{ color:red; font-size:2cm; background-color:green; } </style> </head> <body> <div id="first"> <div> <p>aaaaaaaaa</p> </div> </div> </body> </html>
5.组合选择器(选择符之间用逗号隔开,别和关联选择器弄混了)
<html> <head> <title>关联选择器</title> <style> #first,.one,h1,p{ color:red; font-size:1cm; background-color:green; } </style> </head> <body> <p>aaaaaaaaa</p> <h1>aaaaaaaa<h1> <u id="first">aaaaaaaaa</u><br> <em class="one">aaaaaaaa</em> </body> </html>
6.伪元素选择器
<html> <head> <title>组合样式选择器</title> <style> a:link{ color:green; font-size:1cm; } a:hover{ color:red; font-size:2cm; } a:visited{ yellow:red; font-size:1cm; } p:first-letter{ color:red; font-size:3cm; } p:first-line{ color:yellow; font-size:20px; } </style> </head> <body> <a href="http://www.baidu.com">baidu</a><br> <a href="http://www.hao123.com">hao123</a><br> <a href="http://www.csdn.net">csdn</a> <p>aaaaaaaaaaaa<br> bbbbbbbbbb<br> cccccccccc </p> </body> </html>
这是鼠标没有放上去的时候,鼠标放上去后,链接会发生变化,如下图:
其他的就不多演示了。基本上这些选择器的用法都用代码过一遍了,剩下的就是靠我们活学活用。可不是简单的来个标签看看效果了,所以大家共勉吧。
原文地址:http://blog.csdn.net/wzqnls/article/details/37935981