版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 大学物理完整全套教学课件
- 2025年湖南省邵阳市八年级地生会考题库及答案
- 2025年广东湛江市初二学业水平地理生物会考真题试卷(+答案)
- 2025年湖北省十堰市八年级地理生物会考真题试卷(含答案)
- GPT-5.5官方技术文档（中文）
- 第18课《在长江源头各拉丹冬》 课件 2025-2026学年统编版语文八年级下册
- 外科护理课件制作中的智能化管理
- 2026版企业知识产权许可合同样本
- 项目合作合同关键条款解析
- 关于大学生思想动态及安全的舆情报告9月2026(2篇)
- 二级学院科研简洁的工作总结
- 书稿中学考试全书 《高中数学总复习四十三讲》上
- 统编小学语文六年级下册试题1-6单元达标测试卷及答案（人教部编）
- 区块链与数字货币-数字货币交易平台
- 郴州市桂东县事业单位考试历年真题2023
- 日本明治维新
- GB/T 32945-2016牛结核病诊断体外检测γ干扰素法
- GB/T 18173.2-2014高分子防水材料第2部分：止水带
- GB/T 14563-1993高岭土
- 弱电项目施工合同
- 社会团体拟任负责人基本情况表
评论
0/150
提交评论