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

CSS--选择器

时间:2015-05-27 12:23:48      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:css   选择器   

  • CSS选择器

Selector,Selector,Selector {property:value;property:value...}


CSS的选择器可以分为两大类: (标签名, 属性)
a. 基本选择器: 通配符, 标签, ID, class和属性选择器
b. 组合选择器: 分组选择器,后代选择器,子选择器和相邻兄弟选择器。也叫派生选择器:使用“父元素 子元素”的格式定位到特定父元素下的子元素。

以下是一份html:

<h2>通过样式表来改变网页外表</h2>
<p id="p1">欢迎来到CSS世界</p>
<div class="cs">css给我们带来丰富多彩的世界</div>
<br>
<div class="cs">帝王注定孤独!</div>
<br>
<div title="dt">江山与她何干!</div>

  • 1. 基本选择器

1) 标签选择器     以标签名作为选择器
h2 {
		color: red;
}
div {
	color: red;
}

2) ID选择器    为指定id属性值的某个标签应用样式,以#开头来定义
#p1 {
		color:#00ff00;
		font-size: 40px;
}

3) 类(class)选择器   为指定class属性值的某些标签应用样式,以.开头来定义
.cs {
		color: blue;
}

4) 属性选择器    属性选择器可以根据元素的属性[及属性值]来选择元素。
a. 根据属性名来匹配, 将属性名用[]包含起来
[title] {
color: gray;
font-size: 20px;
}


b. 根据属性名和属性值来匹配, 将属性名和值用[]包含起来

[title='dt'] {
color: gray;
font-size: 20px;
}

5) 通配符选择器   配置任意标签
* {
		font-size: 30px;
}

  • 2. 组合选择器
1) 分组选择器     同时为多个标签或多类标签同时应用指定样式, 中间用,隔开
h2,#p1,.cs {
	color:green;
}
<h2>通过样式表来改变网页外表</h2>
<p id="p1">欢迎来到CSS世界</p>
<div class="cs">帝王注定孤独</div>
<br>
<div class="cs">江山与她何干!</div>
<br>


2) 后代选择器   只要是后代不管是几层,都可以找到
div span {
color: blue;
}


<div title="dt">
		<h3>
			<span>帝王注定孤独!</span>
		</h3>
		<span>江山与她何干!</span>
</div>

3) 子选择器  这里必须是直接子元素
div>span {
color: green;
}


<div title="dt">
		<h3>
			<span>帝王注定孤独!</span>
		</h3>
		<span>江山与她何干!</span>
</div>


4) 相邻兄弟选择器
h3+span {
color: orange;
}


<div title="dt">
		<h3>
			<span>帝王注定孤独!</span>
		</h3>
		<span>江山与她何干!</span>
</div>


5) 超链接相关选择器


超链接的默认样式都是蓝色,并加有下画线。超链接有如下4个选择器:
a:link 设置超级链接在未被访问过时的css样式
a:hover 设置当鼠标悬停在超级链接上时的css样式
a:active 设置超级链接被用户激活(鼠标点击和释放之间的事件)时的css样式
a:visited 设置已经访问过的超级链接的css样式


然后默认超链接是蓝色带一个下划线的样式,如果我希望超链接是黑色然后不带下划线,然后当鼠标移动到上面去的时候出现下划线,点击以后超链接编程红色,这样的效果该如何设计呢?


<html>
<head>
<title>测试: 内部样式表</title>
<style type="text/css">
a:link{
color:block;
text-decoration:none;
}

a:hover {
text-decoration:underline ;
}

a:visited{
color:red;
}

</style>
</head>
<body>
	<a href="#">这里是一个超级链接</a>
</body>
</html>


CSS--选择器

标签:css   选择器   

原文地址:http://blog.csdn.net/u011794238/article/details/46043603

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