02_03.常用选择器
2014-05-19 20:49
148 查看
1.class选择器（当多个tag，需要赋予相同的属性的时候，同时使用class选择器控制）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="test/html;charset=utf-8">
<style type="text/css">
#box1{width:100px;height:100px;background:red;}
#box2{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="box1">块儿</div>
<div id="box2">块儿</div>
</body>
</html>
——————-我是分割线（上下两段代码，显示效果一致）———————
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.box{width: 100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="box">块儿</div>
<div class="box">块儿</div>
</body>
</html>
2.同一个tag，可以使用多个class选择器
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.box{width: 100px;height:100px;background:red;}
.blue{background: blue;}
</style>
</head>
<body>
<div class="box">.box控制我</div>
<div class="box blue">.box和.blue同时控制我</div>
</body>
</html>
3.标签选择器（控制所有一种类型的tag，使其有相同的样式）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
div{width:200px;height:200px;border:solid 2px black;}
p{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div>div控制我<p>p控制我</p></div>
<p>p控制我</p>
</body>
</html>
4.子选择器（只控制div 下的，“所有” p标签）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
div p{width:200px;height:200px;background: red; border:solid 2px black;}
</style>
</head>
<body>
<div><p>div p控制我</p></div>
<div><h1><p>div p控制我</p></h1></div>
<p>div p不控制我</p>
</body>
</html>
5.通用选择器（控制所有tag）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
*{border:solid 2px black;}
</style>
</head>
<body>
<div>*控制我<p>*控制我</p></div>
<div>*控制我<h1>*控制我<p>*控制我</p></h1></div>
<p>*控制我</p>
</body>
</html>
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="test/html;charset=utf-8">
<style type="text/css">
#box1{width:100px;height:100px;background:red;}
#box2{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div id="box1">块儿</div>
<div id="box2">块儿</div>
</body>
</html>
——————-我是分割线（上下两段代码，显示效果一致）———————
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.box{width: 100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="box">块儿</div>
<div class="box">块儿</div>
</body>
</html>
2.同一个tag，可以使用多个class选择器
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
.box{width: 100px;height:100px;background:red;}
.blue{background: blue;}
</style>
</head>
<body>
<div class="box">.box控制我</div>
<div class="box blue">.box和.blue同时控制我</div>
</body>
</html>
3.标签选择器（控制所有一种类型的tag，使其有相同的样式）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
div{width:200px;height:200px;border:solid 2px black;}
p{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div>div控制我<p>p控制我</p></div>
<p>p控制我</p>
</body>
</html>
4.子选择器（只控制div 下的，“所有” p标签）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
div p{width:200px;height:200px;background: red; border:solid 2px black;}
</style>
</head>
<body>
<div><p>div p控制我</p></div>
<div><h1><p>div p控制我</p></h1></div>
<p>div p不控制我</p>
</body>
</html>
5.通用选择器（控制所有tag）
<DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
*{border:solid 2px black;}
</style>
</head>
<body>
<div>*控制我<p>*控制我</p></div>
<div>*控制我<h1>*控制我<p>*控制我</p></h1></div>
<p>*控制我</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 02-常用对象API(集合框架-体系&共性功能) 03-常用对象API(集合框架-方法演示_1) 04-常用对象API(集合框架-方法演示_2)1 2 3 4
- jQuery基础----03jQuery选择器和事件-事件之事件常用方法
- 02_Jquery_03_类选择器
- jquery 最常用选择器排名
- jquery的常用选择器
- [导入]本周ASP.NET英文技术文章推荐[03/02 - 03/15]：ASP.NET AJAX、LinqDataSource、ListView、MVC、JavaScript、智能感知、Ext、CAPTCHA
- 本周ASP.NET英文技术文章推荐[03/02 - 03/15]：ASP.NET AJAX、LinqDataSource、ListView、MVC、JavaScript、智能感知、Ext、CAPTCHA
- 【收藏】本周ASP.NET英文技术文章推荐[02/03 - 02/16]：MVC、Visual Studio 2008、安全性、性能、LINQ to JavaScript、jQuery
- Lesson03_02 样式规则选择器
- 10-02-03 今天干什么了？
- jquery1.3常用选择器的说明和应用
- 本周ASP.NET英文技术文章推荐[01/28 - 02/03]
- 再读《精通css》02：选择器
- 03-网页内容的编码检测 | 02.数据解析 | Python
- 再读《精通css》02：选择器
- eclipse-02:初学：我常用的插件
- 【收藏】本周ASP.NET英文技术文章推荐[01/28 - 02/03]
- 本周ASP.NET英文技术文章推荐[02/03 - 02/16]：MVC、Visual Studio 2008、安全性、性能、LINQ to JavaScript、jQuery
- css入门知识:div和span,常用选择器,高级选择器
- JQuery学习笔记02-选择器把需要的东西揪出来(基础)