css 常用的选择器 ID选择器、类class选择器、标签选择器(div\p等、派生选择器)
css 常用的选择器 ID选择器、类class选择器、标签选择器(div\p等、派生选择器)我们在初学css的时候,会经常用到这几个选择器,他们名称是以上的几个,通过选择器在css的控制来实现不同的效果,如下图
同时写了个代码,让大家看下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>28 css选择器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="道勤教育 http://www.daoqin.net" />
<style>
#test01{
width:100px;
height:50px;
border:1px solid blue;
}
.test002{
width:100px;
height:50px;
border:1px solid red;
}
div{
width:100px;
height:50px;
background:orange;
margin-bottom:10px;
}
div p{
color:red;
}
/*p{
color:red;
}*/
</style>
</head>
<body>
<div id="test01">test001</div>
<div class="test002"></div>
<div>
普通div设置
<p>我是div中的P标签</p>
</div>
<p>我是独立的P标签</p>
</body>
</html>
在面对不同的选择器的时候,我们一定要记得,css控制的范围越精细,那么表示的优先级则是越高的。
如下代码:
<style>
p{
color:red;
}
.test002{
color:green;
}
#test01{
color:blue;
}
div #test01{
color:pink;
}
</style>
</head>
<body>
<div>
<p id="test01" class="test002">道勤网与您一起学习div+css</p>
</div>
</body>范围越小,越高的显示
页:
[1]