一、包含选择器

包含选择器中前后两部分之间以空格隔开，根据左侧选择符指定的祖先元素，然后在该元素下寻找匹配右侧的选择侧符的下级元素

定义包含选择器时，必须保证在HTML结构中第一个对象能够包含第二个对象。

二、简单例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>包含</title>

<style type="text/css">

/*定义类样式*/

.div1{

    font-size:14px;

    color:#FF0000;

    }

/*定义类样式下的标题元素*/

.div1 h1{

    color:#FF00FF;

    }

/*定义类样式下的span元素*/

.div1 span{

    color:#0000FF;

}

</style>

</head>

<body>

<div class="div1">

这是类

  <h1>这是个标题<span>这是标题中的SPAN元素</span></h1>

</div>

</body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>包含</title>

<style type="text/css">

/*定义类样式*/

.div1{

    font-size:14px;

    color:#FF0000;

    }

/*定义类样式下的标题元素*/

.div1 h1{

    color:#FF00FF;

    }

/*定义类样式下的span元素*/

.div1 span{

    color:#0000FF;

}

</style>

</head>

<body>

<div class="div1">

这是类

  <h1>这是个标题<span>这是标题中的SPAN元素</span></h1>

</div>

</body>

</html>

结果:

CSS 包含选择器(九)的更多相关文章

  1. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  2. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  5. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  6. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  7. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  8. CSS 子选择器(六)

    一.子选择器 子选择器中前后部分之间用一个大于号隔开,前后两部分选择符在结构上属于父子关系. 子选择器是根据左侧选择符指定的父元素,然后在该父元素下寻找匹配右侧选择符的子元素. 二.简单例子 < ...

  9. css之选择器

    我们都用过jquery,使用jquery选择器,非常的简单,最近刚好有项目上手,拿起书本看了一下,发现好多的东西都忘掉了,好记性不如烂笔头,就将这章内容记录下来,现在我们看下css原生的选择器. 选择 ...

随机推荐

  1. Linux内核中双向链表的经典实现

    概要 前面一章"介绍双向链表并给出了C/C++/Java三种实现",本章继续对双向链表进行探讨,介绍的内容是Linux内核中双向链表的经典实现和用法.其中,也会涉及到Linux内核 ...

  2. 【转载】shell中 dd 命令

    转载自:http://blog.chinaunix.net/uid-24958038-id-3416169.html dd if=/dev/zero of=的含义是什么? 一.dd命令的解释 dd:用 ...

  3. 小printf的故事(未完待续）

    小printf的故事 这篇文章的原文来自:英文原文作者仿照<小王子>中的情节,生动有趣的阐述了小printf从编程小白到专家的成长历程.这是我第一次尝试翻译文章,肯定有很多不足之处,情不要 ...

  4. EventBus初理解

    缘由:     平时工作,因为懒于动笔的原因,也没注重技术和经验的积累,导致之前曾经研究过的问题现在又忘记了,所以要慢慢注重积累,那么就从写作开始,谈谈对工作中碰到的问题进行整理和归纳.     我们 ...

  5. IT人的自我导向型学习：学习的3个维度

    看到大家对我的文章赞了不少,看来大家还比较喜欢看.园子里的一些朋友和我说:”终于又看到你要在园子里发原创文章了.几年前就受益匪浅,经过几年的成长分享来的东西肯定也是精品.“ 感谢大家对我的信任,如果你 ...

  6. JS&CSS文件请求合并及压缩处理研究（三）

    上篇我们进行了一些代码方面的准备工作.接下来的逻辑是:在View页面解析时,通过 Html.AppendResFile 方法添加的资源文件,我们需要按照分组.优先级,文件名等条件,对其路径进行合并.具 ...

  7. 11.22 点餐APP第一阶段总结

    第一个冲刺结束了,任务也算是完成了. 团队合作不像单独做那样想怎么来就怎么来,各个人都不同的意见,最后方案的需要每个人一致同意通过才能执行. 不过团队合作分配到每个人的任务也相对轻一点,而且遇到问题解 ...

  8. 使用openssl生成RSA公私密钥

    在windows 环境下 1.进入cmd命令窗口 切换到openssl程序目录下 2.输入openssl.exe,进入openssl命令模式下 3.生成私钥输入“genrsa -out app_pri ...

  9. WebApi中跨域解决办法

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案.由于时间有限,本文不会深入. 笔者遇到的问题是Js调用WebAPI中的数据进行跨域的场景.涉及若干跨域方案: 方案1:j ...

  10. CSS行高line-height的理解

    一.行高的字面意思 “行高“顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其中底部第二条线就是基 ...