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

(2)css的复合选择器与特性的更多相关文章

  1. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  2. 0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  3. CSS复合选择器，元素的显示模式，CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  4. 使用CSS的类名交集复合选择器

    首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接 ...

  5. css复合选择器的权重

    选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...

  6. 使用css的类名交集复合选择器 《转》

    复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各 ...

  7. css学习_css复合选择器

    css复合选择器 a.交集选择器  (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...

  8. CSS复合选择器

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...

  9. CSS复合选择器是什么？复合选择器是如何工作

    复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...

随机推荐

  1. Python高级进阶(二)Python框架之Django写图书管理系统(LMS)

    正式写项目准备前的工作 Django是一个Web框架,我们使用它就是因为它能够把前后端解耦合而且能够与数据库建立ORM,这样,一个Python开发工程师只需要干自己开发的事情就可以了,而在使用之前就我 ...

  2. C. The Two Routes---cf602C(Dij)

    http://codeforces.com/problemset/problem/602/C 题目大意:  有n个城市 有m条铁路  如果两个城市没有铁路  那么一定有公路 求从1 到 n 用铁路和公 ...

  3. CentOS 7下安装Logstash ELK Stack 日志管理系统（上）

    介绍 The Elastic Stack - 它不是一个软件,而是Elasticsearch,Logstash,Kibana 开源软件的集合,对外是作为一个日志管理系统的开源方案.它可以从任何来源,任 ...

  4. VM Workstation的Unity Mode有什么用

    正常情况下,如果我启动了一个VM Workstaion的虚拟机,比如是一个Linux系统,并且没运行任何软件,进入Unity mode之后,我真实系统的左下角会有一个虚拟机的图标 点击这个图标可以打开 ...

  5. libevent多线程使用事项

    转 http://www.cnblogs.com/Seapeak/archive/2010/04/08/1707807.html 在linux平台上使用c开发网络程序的同志们一般情况下都对鼎鼎大名的l ...

  6. POJ3264Balanced Lineup（最基础的线段树）

    採用一维数组建树. (由于一维数组建的是全然二叉树,时间上比用孩子节点指针建树慢.只是基本能够忽略=-=) #include<iostream> #include<cstdio> ...

  7. 提升Android编译速度

    Android codebase都非常大.编译一次都须要花非常多时间.假设是preloader/lk/bootimage还好,可是Android的话都是非常久. 实际上这个编译时间还是能够进一步缩短! ...

  8. HDOJ 4455 Substrings 递推+树状数组

    pre[i]第i位数往前走多少位碰到和它同样的数 dp[i]表示长度为i的子串,dp[i]能够由dp[i-1]加上从i到n的pre[i]>i-1的数减去最后一段长度为i-1的断中的不同的数得到. ...

  9. 设计模式C++实现_2_简单工厂模式

    简单工厂模式 主要用于创建对象. 新加入类时. 不会影响曾经的系统代码. 核心思想是用一个工厂来依据输入的条件产生不同的类,然后依据不同类的 virtual 函数得到不同的结果. 以下以苹果手机的生产 ...

  10. 从头认识java-15.1 填充容器（3）-填充Map

    这一章节我们来讨论一下填充容器的还有一个方面Map.之前的两个章节我们都是用list来作为容器.这一章节我们使用Map. 还有在这里解释一下为什么一直都使用生成器这个东西,事实上他就是建造者设计模式, ...