您的位置：首页 > Web前端 > CSS

CSS选择器

2016-05-16 18:48 651 查看

简介

关于CSS初识介绍，不做累述，参照博客。

分类

元素选择器
HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器。元素选择器的有效范围为页面中所有的、名称相同的HTML元素。
格式：元素 { 属性: 值; }
Demo
h1 { color: red; } h2 { color: #FF0000; }    或者：h1, h2 { color:#ff0000; }
类选择器
如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。
格式1： .类名 { 属性: 值; }
格式2：元素.类名 { 属性: 值; }
Demo
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>类选择器示例1</title>
<style type="text/css">
.tt{ font-size:10pt; font-family:黑体; color:#800080;font-weight:bold; }
</style>
</head>
<body>
<p class="tt">示例一</p>/*p标签应用名字为tt的类层叠样式表*/
<h1 class="tt">示例二</h1>/*h1标签也应用名字为tt的类层叠样式表*/
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>类选择器示例2</title>
<style type="text/css">
h1.left { color:blue; }
h1.right { color:red; }
</style>
</head>
<body>
<h1 class="left">第一行</h1>/*h1应用名为h1.left的类样式规则/
<h1 class="right">第二行</h1>/*h1也应用名为h1.right 的类样式规则*/
</body>
</html>
ID选择器
除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。
         格式：#id名 { 属性: 值; }
         示例：#red { color: red;}
<p id="red">欢迎使用id选择器</p>
包含选择器
如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记
h1 b{ color:blue; } /*注意h1和b之间以空格分隔*/
<html>
<head>
<title>css选择器</title>
<meta charset="utf-8"/>
<styletype="text/css">
Demo
/*标签选择器*/
div{
border:solid 2px;
height:200px;
}
/*id选择器*/
#div01{
background-color:gold;
color:red;
}
/*类选择器*/
.common{
background-color:gray;
}

/*包含选择器*/
divh3{
color:green;
}

/*子选择器*/
div>h3{
color:red;
}
/*组选择器*/
div,h3{

color:indigo;
}
/*伪类*/
input:focus{
font-size:50;
}
</style>
</head>
<body>
<div id="div01">
我是div01
</div><br/>
<divclass="common" id="div02">
<h3>今天柳絮好少</h3>
<table>
<tr>
<td>
<h3>今天柳絮好少</h3>
</td>
</tr>
</table>
我是div02
</div>
<h3>今天柳絮好少</h3>
<br/>
<inputtype="text" name="uanme" id="uanme"value="liling" />
</body>
</html>

业务思想

CSS选择器，见名知意，为我们的页面布局提供更多的选择，以便使得布局更为符合我们的标准。掌握常用的选择器可满足普通Web项目而言，若项目中有其它选择器的应用，请参照API学习使用。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航