版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
CSS基础
--复合选择器01三种基本选择器优先级交集选择器02并集选择器03目录1基本选择器的优先级<html><head>
<title>层叠特性</title></head><styletype="text/css">
p{
color:green;
}
.red{
color:red;
}
.black{
color:black;
}
#line3{
color:blue;
}</style><body>
<p>这是第1行文本</p>
<pclass="red">这是第2行文本</p>
<pid="line3"class="red">这是第3行文本</p>
<pstyle="color:orange;"id="line3">这是第4行文本</p>
<pclass="blackred">这是第5行文本</p></body></html>这5行的文字显示什么颜色呢？1基本选择器的优先级你做对了吗？为什么会这样呢？1基本选择器的优先级这其实是color属性冲突的问题。也正是我们之前给大家讲到的“层叠”概念。怎么理解呢？CSS样式在针对同一元素配置同一属性时，会依据层叠规则（权重）来处理冲突，即会选择应用权重高的CSS选择器所指定的属性，这一操作一般也被描述为权重高的覆盖权重低的，因此称其为“层叠”。1基本选择器的优先级CSS样式的优先级优先级关系：行内样式>内嵌样式>链接样式100010010>行内样式ID选择器类选择器>10>标记选择器通配符子选择器相邻选择器继承样式>复合选择器权重为基础选择器权重的叠加1基本选择器的优先级没有冲突，标记选择器对其生效标记选择器与类选择器，标记选择器权重1，类选择器权重10。所以以类选择器的颜色为准，显示为红色标记选择器权重1，类选择器权重10，ID选择器权重是100。所以以ID选择器的颜色为准，显示为蓝色行内样式权重1000，标记选择器权重1，ID选择器权重100。所以以行内样式的颜色为准，显示为橙色标记选择器权重1，类选择器权重100。所以以类选择器为准，但类选择器同时选择了两个，依据定义的顺序，以最近的顺序为准，则显示为黑色大的原则：越特殊的样式，其优先级越高。行内样式仅对指定的一个元素产生影响，因此它非常特殊；使用类选择器的某种元素，一定是所有该种元素中的一部分，因此它一定比标记样式特殊；ID选择器是针对某一个元素的，因此它一定应用于多个元素的类选择器特殊。技巧:
复合选择器是由三种基本选择器通过不同的组成构成的，可实现更强、更方便的选择功能。
接下来介绍交集选择器、并集选择器。2交集选择器2交集选择器（1）定义：由两个基本选择器直接链接构成，其结果是选中二者各自元素范围的交集。其中第1个必须是标记选择器，第2个必须是类别选择器或ID选择器。（2）作用：交集选择器将选中同时满足前后两个选择器定义的元素。2交集选择器h3.special{
属性:属性值;
属性:属性值;………}（3）语法格式：h3#id{
属性:属性值;
属性:属性值;………}h3#idh3#idh3.specialh3.special2交集选择器（4）代码示例：<html>
<head>
<title>交集选择器</title>
<styletype="text/css">
p{
color:blue;
}
.good{
color:green;
}
p.good{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>我是蓝色</p>
<h6>我就是h6标签，没有用样式</h6>
<pclass="good">我用了标记选择器和类选择器，那我是红色加粗吗？</p>
<h6class="good">我是h6标签，用的类选择器是绿色</h6>
</body>
</html>
3并集选择器（1）定义：任何形式的选择器都可以作为并集选择的一部分。（2）作用：并集选择器是同时选中各个基本选择器所选择的范围。3并集选择器（3）语法格式：选择器1,选择器2{
属性:属性值;
属性:属性值;………}3并集选择器<html>
<head>
<title>并集选择器</title>
<styletype="text/css">
.good{
color:green;
}
h1,h2,h3,h4,h5,p{
color:red;
font-size:20px;
}
h2.good,.good,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>我是1号标题</h1>
<h2>我是2号标题</h2>
<h3>我是3号标题</h3>
<h4>我是4号标题</h4>
<h5>我是5号标题</h5>
<p>我是p标签</p>
<pclass="good">我是p标签，加了good类选择器</p>
<pid="one">我是p标签，加了ID选择器</p>
<h2class="good">我是交集选择器h2.good</h2>
</body>
</html>标记选择器与类选择器优先级的问题（4）代码示例：<html>
<head>
<title>并集选择器</title>
<styletype=“text/css”>
.good{
color:green;
}
*{
color:red;
font-size:20px;
}
h2.good,.good,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>我是1号标题</h1>
<h2>我是2号标题</h2>
<h3>我是3号标题</h3>
<h4>我是4号标题</h4>
<h5>我是5号标题</h5>
<p>我是p标签</p>
<pclass="good">我是p标签，加了
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 针对苹果种植农户的问卷调查
- 雪松搬迁施工方案
- 固话地坪施工方案
- 筏板基础专项施工方案
- 6年级下册英语译林版第二单元小课文
- 6-9岁儿童蛋白质的标准
- 低温下简支梁缺口冲击强度
- 温州工程拆除施工方案
- c25混凝土受冻临界强度
- 地上物 苗木补偿标准
- 厨房设备购销合同范本(一)与厨房设备采购合同8篇
- 2025年中储粮吉林分公司招聘（74人）笔试参考题库附带答案详解
- 2024-2025学年九年级化学人教版教科书解读
- 2024年上海烟草集团有限责任公司招聘笔试真题
- 2025年长春医学高等专科学校单招职业技能测试题库及完整答案1套
- 2025年中国大唐集团有限公司重庆分公司高校毕业生招聘笔试参考题库附带答案详解
- 游戏账号购买协议书范本
- 北京工装合同范本
- 建筑工地道路养护的进度与措施
- 加油站合作经营协议书范本
- 《苗圃生产与管理》教案-第二章 园林苗木的种实生产
评论
0/150
提交评论