一、包含选择器

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

定义包含选择器时，必须保证在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. 配置EF链接 MySql 的方法

    材料: 1.MySQL for Visual Studio 1.2.4.msi 下载:http://dev.mysql.com/downloads/windows/visualstudio/ 2.my ...

  2. `fw服务端非完整` 工程开发初期的工作

    前面写到了一些关于cocos2dx在开发中的一些模块以及一些解决方法,那些都属于本人的个人简介和个人倾向的解决方案.最近这几天我完善了一下ui解析的部分,当然也只是抽出一点点时间去做的这件事情.我添加 ...

  3. 深入研究 蒋金楠（Artech）老师的 MiniMvc（迷你 MVC），看看 MVC 内部到底是如何运行的

    前言 跟我一起顺藤摸瓜剖析 Artech 老师的 MiniMVC 是如何运行的,了解它,我们就大体了解 ASP.NET MVC 是如何运行的了.既然是“顺藤摸瓜”,那我们就按照 ASP.NET 的执行 ...

  4. Alwayson+Replication

    本文将介绍如何实现Alwayson + Replication ,通过AlwaysOn实现Publication database的高可用性,使Publication database在failove ...

  5. Lua中的协同程序 coroutine

    Lua中的协程和多线程很相似,每一个协程有自己的堆栈,自己的局部变量,可以通过yield-resume实现在协程间的切换.不同之处是:Lua协程是非抢占式的多线程,必须手动在不同的协程间切换,且同一时 ...

  6. maven -- 问题解决（二）解决“Could not calculate build plan”问题

    错误提示如下:(eclipse+maven) Could not calculate build plan: Failure to transfer org.apache.maven.plugins: ...

  7. SharePoint 2013中规划企业搜索体系结构

    摘要:了解如何规划小型.中型或大型企业搜索体系结构. 设置企业搜索体系结构之前,需要仔细规划很多事项.我们将逐步帮助您规划小型.中型或大型企业搜索体系结构. 您是否熟悉 SharePoint 2013 ...

  8. SQL中的连接查询及其优化原则

    连接查询是SQL的主要任务,只有很好的掌握了连接查询及其优化方法才算是掌握了SQL的精髓所在.最近在面试中遇到了有关连接查询的问题,感觉回答的不是很好,总结一下. 具体示例请参考:http://www ...

  9. CentOS6.5菜鸟之旅：纯转载Linux目录结构

    来自:http://www.iteye.com/topic/1125162 使用linux也有一年多时间了  最近也是一直在维护网站系统主机  下面是linux目录结构说明 本人使用的是centos系 ...

  10. 在VS中使用TinyFox调试OWIN应用(转)

    在很早一段时间之前,我曾经写过一篇关于Katana的使用方法的文章<如何安装并简单的使用OwinHost——Katana>,上面就有介绍如何在VS中调试使用Katana作为Host的App ...