码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式选择器

时间:2014-07-19 02:21:26      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:样式   样式选择器   css   tag   

bubuko.com,布布扣

上面的思维导图已经大致将这六种选择器的重要点描述出来了,下面用代码再一一实验一次。

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>

运行结果:(这种选择器应该是相对比较简单的了)

bubuko.com,布布扣

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>

运行结果:

bubuko.com,布布扣

(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>

运行结果:

bubuko.com,布布扣

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>

运行结果:

bubuko.com,布布扣

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>

运行结果:

bubuko.com,布布扣

因为这里涉及到了标签之间的嵌套关系,所以简单提一下样式的继承:

所有嵌套在某个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>

运行结果:

bubuko.com,布布扣

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>

运行结果:

bubuko.com,布布扣

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>

运行结果:

bubuko.com,布布扣

这是鼠标没有放上去的时候,鼠标放上去后,链接会发生变化,如下图:

bubuko.com,布布扣

其他的就不多演示了。基本上这些选择器的用法都用代码过一遍了,剩下的就是靠我们活学活用。可不是简单的来个标签看看效果了,所以大家共勉吧。


CSS样式选择器

标签:样式   样式选择器   css   tag   

原文地址:http://blog.csdn.net/wzqnls/article/details/37935981

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!