css类选择器使用
2017-09-27 18:07
736 查看
css类选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>类选择器</title>
<style type="text/css">
/*根据继承，给父元素设置样式，子元素也会继承*/
/*针对某一类标签，可以使用标签选择器*/
p{font-size:15px;color:blue;}
/*针对某一个元素，ID选择器*/
#two{font-size:20px;color:green;font-weight:bold;}
/*针对某一类元素，设置相同的样式*/
.waring{color:red;}
.bigText{font-size:36px;font-weight:bold;}
</style>
</head>
<body>
<div>1. 每天告诉自己一次，『我真的很不错』</div>
<!--id选择器使用时在标签里加id=""-->
<p id="two">2. 生气是拿别人做错的事来惩罚自己</p>
<!--类选择器在使用时在标签里加class=""-->
<h1 class="waring">3. 生活中若没有朋友，就像生活中没有阳光一样</h1>
<p>4. 明天的希望，让我们忘了今天的痛苦
5. 生活若剥去了理想、梦想、幻想，那生命便只是一堆空架子
</p>
<p class="waring bigText">9. 发光并非太阳的专利，你也可以发光<p>
<div>10. 愚者用肉体监视心灵，智者用心灵监视肉体</div>
<div class="waring">12. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</div>
</body>
</html>
css继承以及优先级
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>类选择器</title>
<style type="text/css">
/*根据继承，给父元素设置样式，子元素也会继承*/
body{
font-size:12px;
color:blue;
}
p{
color:green;
}
p{
color:red;
}
</style>
</head>
<body>
<div>1. 每天告诉自己一次，『我真的很不错』</div>
<!--id选择器使用时在标签里加id=""-->
<p>2. 生气是拿别人做错的事来惩罚自己</p>
<!--类选择器在使用时在标签里加class=""-->
<h1>3. 生活中若没有朋友，就像生活中没有阳光一样</h1>
<p>4. 明天的希望，让我们忘了今天的痛苦
5. 生活若剥去了理想、梦想、幻想，那生命便只是一堆空架子
</p>
<p>9. 发光并非太阳的专利，你也可以发光<p>
<div>10. 愚者用肉体监视心灵，智者用心灵监视肉体</div>
<div>12. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</div>
</body>
</html>
总结：
1.可以同时给某个元素应用多个类<p class="a1 a2"></p>,在类名与类名之间用空格分隔
2.id选择符可以多个元素使用，但最好只一个使用。
3.类名或ID名不要用数字开头，不生效。
css特点：
1.继承，子元素继承父元素的某些样式，
【某些不是全部，因为有些子元素本身就有默认值，所以就不用父元素】
2.层叠：子元素如果定义了和父元素相同的样式，会覆盖掉父元素的样式
*******后面的样式会覆盖前面的样式。
css样式的优先权:当样式有冲突时，听谁？
内联式>内嵌式>链接式>导入式@import，一般使用第二和第三个样式配合使用
css优先权：就近原则
选择符优先权：
行内>ID>类选择器class>标签选择器
特殊情况可以提升优先权：在属性值后面+!important(IE6不支持)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>类选择器</title>
<style type="text/css">
/*根据继承，给父元素设置样式，子元素也会继承*/
/*针对某一类标签，可以使用标签选择器*/
p{font-size:15px;color:blue;}
/*针对某一个元素，ID选择器*/
#two{font-size:20px;color:green;font-weight:bold;}
/*针对某一类元素，设置相同的样式*/
.waring{color:red;}
.bigText{font-size:36px;font-weight:bold;}
</style>
</head>
<body>
<div>1. 每天告诉自己一次，『我真的很不错』</div>
<!--id选择器使用时在标签里加id=""-->
<p id="two">2. 生气是拿别人做错的事来惩罚自己</p>
<!--类选择器在使用时在标签里加class=""-->
<h1 class="waring">3. 生活中若没有朋友，就像生活中没有阳光一样</h1>
<p>4. 明天的希望，让我们忘了今天的痛苦
5. 生活若剥去了理想、梦想、幻想，那生命便只是一堆空架子
</p>
<p class="waring bigText">9. 发光并非太阳的专利，你也可以发光<p>
<div>10. 愚者用肉体监视心灵，智者用心灵监视肉体</div>
<div class="waring">12. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</div>
</body>
</html>
css继承以及优先级
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>类选择器</title>
<style type="text/css">
/*根据继承，给父元素设置样式，子元素也会继承*/
body{
font-size:12px;
color:blue;
}
p{
color:green;
}
p{
color:red;
}
</style>
</head>
<body>
<div>1. 每天告诉自己一次，『我真的很不错』</div>
<!--id选择器使用时在标签里加id=""-->
<p>2. 生气是拿别人做错的事来惩罚自己</p>
<!--类选择器在使用时在标签里加class=""-->
<h1>3. 生活中若没有朋友，就像生活中没有阳光一样</h1>
<p>4. 明天的希望，让我们忘了今天的痛苦
5. 生活若剥去了理想、梦想、幻想，那生命便只是一堆空架子
</p>
<p>9. 发光并非太阳的专利，你也可以发光<p>
<div>10. 愚者用肉体监视心灵，智者用心灵监视肉体</div>
<div>12. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</div>
</body>
</html>
总结：
1.可以同时给某个元素应用多个类<p class="a1 a2"></p>,在类名与类名之间用空格分隔
2.id选择符可以多个元素使用，但最好只一个使用。
3.类名或ID名不要用数字开头，不生效。
css特点：
1.继承，子元素继承父元素的某些样式，
【某些不是全部，因为有些子元素本身就有默认值，所以就不用父元素】
2.层叠：子元素如果定义了和父元素相同的样式，会覆盖掉父元素的样式
*******后面的样式会覆盖前面的样式。
css样式的优先权:当样式有冲突时，听谁？
内联式>内嵌式>链接式>导入式@import，一般使用第二和第三个样式配合使用
css优先权：就近原则
选择符优先权：
行内>ID>类选择器class>标签选择器
特殊情况可以提升优先权：在属性值后面+!important(IE6不支持)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用UTL_SMTP发送中文邮件及使用UTL_TCP从附件服务器获取中文附件
- Windows API的作用及使用技巧
- 使用 BeginGetRequestStream 方法对流实例发出异步请求
- iis使用十大原则
- mysql sum()函数的使用
- IoC原理-使用反射/Emit来实现一个最简单的IoC容器
- Python编程中NotImplementedError的使用方法
- GIT/node使用
- ip-int-byte[]互转-使用java原生api
- .NET Core 中正确使用 HttpClient 的姿势
- 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的。
- 使用JSONRPC 2.0规范解决多语言RPC交互的方案
- Android 使用地图时的权限请求
- greta简单使用
- JAVA中使用Htmlparse解析HTML文档
- Cocos2d-x 3.0 开发（十二）在CocoStudio中使用粒子挂载与曲线动画
- Amazon EC2 建立instance 使用SSH
- Thinkphp框架使用PHPMail实现发送邮件
- Servlet的介绍与使用
- WinCVS与CVSNT简明使用手则(一)