(2)css的复合选择器与特性
css的复合选择器与特性
在本篇学习资料中，将深入了解css的相关概念，上一篇介绍的3种基本选择器的基础上，学习3种由基本选择器复合构成的选择器，然后再介绍css的两个重要的特性。
1、复合选择器
复合选择器就是两个或多个基本选择器，通过不同的方式连接成的选择器。
复合选择器的三种类型：交集选择器、并集选择器、后代选择器。
（1）交集选择器
“交集”复合选择器由两个选择器直接连接构成；其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器；这两个选择器之间不能有空格。
例如：下图声明了 p、.special、p.special这三种选择器：
案列代码：
<!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{
color:blue;
}
p.special
{
color:red;
}
.special:
{
color:green;
}
</style>
</head>
<body>
<p>普通段落文本（蓝色）</p>
<h3> 普通标题文本（黑色）</h3>
<p class="special">指定了.special类别的段落文本（红色）</p>
<h3 class="special">指定了.special类别的段落文本(绿色)</h3>
</body>
</html>
案例代码中定义了p 标记的样式，也定义“.special”类别的样式，此外还单独定义了p.special用于特殊的控制，而在这个p.special中定义的风格样式仅仅适合用于<p class="special">，而不会影响使用.special的其他标记。
（2）并集选择器
并集选择器简称“集体声明”；并集选择器是多个选择器通过逗号连接而成的。
案列演示：
<!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">
h1,h2,h3,h4,h5,p{
color:green;
font-size:1px;
}
h2.special,.special,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>案例文字1</h1>
<h2 class="special">案例文字2</h2>
<h3>案例文字3</h3>
<h4>案例文字4</h4>
<h5>案例文字5</h5>
<p>案例文字p1</p>
<p class="special">案例文字p2</p>
<p id="one">案例文字p3</p>
</body>
</html>
案列中可以看到所有行的颜色都是绿色，而且字体大小均为15px。这种集体声明的效果与单独声明的效果完整相同 h2.special 、.special 和#one的声明并不会影响前一个的集体声明，第二行和最后两行在绿色和大小为15px的前提下使用了下划线进行突出。
（3）后代选择器
css选择器中，还可以通过嵌套的方式对特殊位置的html 标记进行声明，例如当<p>与</p>之间包含<span></span>标记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。
例如，假设有下面的代码：
<p>外层的文字，<span>中间的文字<b>内层的文字</b></span></p>
外层是<p>标记，里面嵌套了<span>标记，<span>标记中又嵌套了<b>标记，则称<span>是<p>的子元素，<b>是<span> 的子元素。
<!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 span{
color:blue;
}
span{
color:yellow;
}
</style>
</head>
<body>
<p>嵌套使<span>用css（蓝色）</span>标记的方法</p>
嵌套之外的<span>标记（黄色）</span>不生效
</body>
</html>
通过将span选择器嵌套在p选择器中进行声明，显示效果只适合用于<p>和</p>之间的<span>标记，而其外的<span>标记并不产生任何效果；只有第一行中<span>和</span>之间的文字变成了蓝色，而第二行文中 <span>和</span>之间的文字则是按照第二条css样式规则设置的，即为黄色。
**选择器的嵌套在css编写中可以大大减少对class和ID的的生声明。
在css2中还规定了一种符合选择器，称为“子选择器”，也就是只对直接后代有影响的选择器，而对子孙以及多层的后代不会产生作用。
**子选择器和后代选择器的语法区别在于使用大于号连接：
<p>外层的内容，<span>中间的内容b>内层的内容</b></span></p>
假设上面的内容css设置为：
p>span{
color:yellow;
}
效果是仅有“中间的内容”这几个字变为黄色，因为span是p的直接后代，b是p的“孙子”不在选中范围内。
2、CSS的继承特性
css的继承指的是子标记可以会继承父标记的所有的样式风格，并可以在父标记样式风格的基础上再加上修改，产生新的样式，且子标记的样式风格完全不会影响父标记。
子标记会继承父标记中的样式：
<p>老罗是<b>NB</b>类型的人</p>
假设上面的内容css设置为:
p{
color:green;
text-decoration：underline;
}
b{
color:red;
}
案列效果为：
上图可以看到b继承了下划线样式，还改变了颜色 。而且子标记的样式风格完全不会影响父标记，这样就可以实现CSS样式的共用。
3、CSS的层叠特性
层叠特性可概括为各样式间的优先级顺序，当产生冲突时以优先级高的为准。
各个样式优先级排行：
行内样式>ID样式>class样式>标记样式
当两个类别样式优先级相同时，此时以写在前者为准（写在前面>写在后面）。如：<p class="p1 p2">此时p1样式优先</p>
以上内容部分出自www.ptpress.com.cn
转载于:https://www.cnblogs.com/KTV123/p/5374396.html
(2)css的复合选择器与特性相关推荐
- CSS基础（复合选择器-三大特性）
CSS基础(复合选择器-三大特性) Emmet语法 快速生成HTML 如果想快速生成多个标签,直接*n. div*3
- 前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器 后代选择器 子元素选择器 交集选择器(不常用) 并集选择器 链接伪类选择器 (2)标签的显示模式 块级元素block-level 行内元素inl ...
- 0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
- CSS二(复合选择器)
复合选择器 复合选择器可以更准确.更高效的选择目标元素(标签) 由两个或多个基础选择器,通过不同的方式组合而成 复合选择器包括:后代选择器.子选择器.并集选择器.伪类选择器等 后代选择器 又称包含选择 ...
- HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器 交集选择器由两个选择器直接构成,其中第一个 ...
- 前端入坑第六弹——CSS的复合选择器和背景设置
又是好几天没更新了,今天我来介绍一下CSS里面的复合选择器以及网页中的背景设置. 复合选择器 比起一般的基础选择器,复合选择器能够更准确.更高效地定位网页元素. 后代选择器 后代选择器可以对于父元素里 ...
- CSS入门---复合选择器学习与掌握
css基础选择器的学习与掌握 一. css复合选择器分为:后代选择器,子选择器,并集选择器,伪类选择器(css选择器具体分类看我css选择器思维导图) 二. (1)后代选择器 元素1 元素2{ 声明 ...
- CSS 的复合选择器
后代选择器 (重要) 后代选择器又称为包含选择器 例如: ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */ 元素1 和 元素2 中间用空格隔开 元素1 是父级,元素2 ...
- CSS之复合选择器（交集、并集选择器）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- CSS（二）——复合选择器、元素显示模式、背景、三大特性
文章目录 *1.Emmet语法 *1.1 快速生成HTML结构语法 *1.2 快速生成CSS样式语法 1.CSS 的复合选择器 1.1 什么是复合选择器 1.2 后代选择器 (重要) 1.3子选择器( ...
最新文章
- python工程师薪资坑吗-Python中反人类直觉的特性，你踩过坑吗？
- 沈阳大学计算机系教师,张春芳(信息工程学院)老师 - 沈阳大学 - 院校大全
- java json.stringify_JavaScript如何实现JSON.stringify
- 【数据结构】二叉树的存储和遍历
- 变异测试 java_编码的喜悦……以及Java中的变异测试
- 三维叉乘怎么算_3分钟做完这些题，你的CAD才算熟练
- 通过少儿英语入门孩子的自信更多
- Hadoop(六)搭建分布式HBase集群
- java restful开发规范_restful api 开发规范
- 零基础带你学习MySQL—自连接（二十一）
- Java下载excel文件并且添加水印效果
- nginx配置域名指向ip
- loj #6570. 毛毛虫计数
- Oracle中有dateadd吗,oracle dateadd的函数有哪些？
- 兰州拉面进非洲：一群80后的创业历险
- xcopy、rd、COPY、MD、DEL、REN 命令祥解
- 游戏开发---影子跟随算法
- 太原市高二会考计算机试题及答案,太原市第二十一中学校2019-2020学年高二会考模拟生物试卷...
- Eigen/Matlab库矩阵运算方法
- Python 结合Ansible 把管理资产信息自动插入到CMDB中