CSS选择器



HTML标记定义


<p>...</p>

p { 属性:属性值 ;属性1:属性值1 }

p可以叫做选择器,定义那个标记中的内容执行其中的样式

一个选择器可以控制若干个样式属性,他们之间需要用英语的“;”隔开,最后一个可以不应加“;”



Class定义


<p>...</p>

class定义是以“.”开始

.p { 属性:属性值 ;属性1:属性值1 }



ID定义


<p id="p">...</p>

ID定义是“#”开始的

#p { 属性:属性值 ;属性1:属性值1 }



优先级问题


1.ID>Class>HTML

2.同级时选择离元素最近的一个的

#p { color: red }

#p { color: #f60 }

执行颜色为#f60的



组合选择器(同时控制多个元素)


h1,h2,h3 { color: red;  }

选择器组合可以使用“,”隔开



伪元素选择器


1.a:link

正常连接的样式

2.a:hover

鼠标放上去的样式

3.a:active

选择链接时的样式

4.a:visited

已经访问过的链接的样式

 


小练习



<!doctype html>


<html>


<head>


<title>定义CSS样式(CSS选择器)</title>


<meta charset="utf-8">


<style type="text/css">


/*


p { color:red; font-size:28px; }


.p { color:green; font-size:28px; }


.pp{ color:red; }


#ppp { color:blue; }


#ppp p { color:red; }






div { color:red; }


.p { color:green; }


#pp { color:blue; }








.p { color:red; }


.p { color:green; }








h1 , h2 , h3 , h4 , p, .div ,#div{ color:red ; font-size:40px }




*/


a:link { color:red; }


a:hover { color:green; }


a:active { color:yellow; }


a:visited { color:blue; }






</style>


</head>


<body>


<!--


<div id="pp">


<h1>麦子学院麦子学院麦子学院</h1>


<h2>麦子学院麦子学院麦子学院</h2>


<h3>麦子学院麦子学院麦子学院</h3>


<h4>麦子学院麦子学院麦子学院</h4>


</div>


<p>


麦子学院麦子学院麦子学院


</p>


<div>


麦子学院麦子学院麦子学院


</div>




<div id="div">


麦子学院麦子学院麦子学院


</div>


-->


<a href="http://www.baidu.com" target="_blank">百度</a>


<a href="http://www.baidu.com/ddddd" target="_blank">百度ddd</a>


<a href="http://www.baidu.com/ddddsasad" target="_blank">百度dasdd</a>


<a href="http://www.baidu.com/dasasadddd" target="_blank">百度asaddd</a>


<a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddsad</a>


<a href="http://www.baidu.com/dsasaddd" target="_blank">百度ddd</a>


<a href="http://www.baidu.com/dddasasdd" target="_blank">百度asaddd</a>


<a href="http://www.baidu.com/dsaadddd" target="_blank">百度ddd</a>


</body>


</html>

 

运行结果:


CSS.png

【本文由麦子学院独家原创,转载请注明出处并保留原文链接】


logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

有一位课程导师想与你聊聊

客服热线 400-862-8862

回到顶部