一、包含选择器

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

定义包含选择器时，必须保证在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. MyBatis知多少（2）

    MyBatis从目前最流行的关系数据库访问方法中吸收了大量的优秀特征和思想,并找出其中的协同增效作用.下图展示了MyBatis框架是如何吸收我们在多年使用不同方式进行数据库集成的 开发过程中所学到的知 ...

  2. C++ Web Service SDK

    https://github.com/zaphoyd/websocketpp https://github.com/aws/aws-sdk-cpp

  3. WP8 SqlCE和SqlLite数据存储性能比较

    在平时的开发中一定会用到本地数据存储,除了独立存储外我们还可以选择SqlCE和SqlLite:于是在选择上我们就必须权衡他们两者的性能择优选择. 测试代码:(这个例子是在msdn sqllite例子上 ...

  4. [转载]逐步建设企业DevOps能力

    当软件行业进入互联网时代,市场对软件产品和服务的交付提出了更高的要求:不仅要快速实现需求,而且要快速发布上线,并且必须保证业务可靠.高效运行.为了满足这些要求,IT组织需要强有力的流程.技术和人员作为 ...

  5. 免费素材下载：iOS 8 矢量 UI 素材套件

    小伙伴们,苹果终于在今天凌晨推送了 iOS 8 的正式版.虽然该系统并未与 iPhone6 发布会同时亮相,但对于已经提前体验尝鲜过测试版的同学来说并不陌生.iOS 8 几乎每个图标都进行了重新设计, ...

  6. Android 开发有用代码积累

    Android开发需求变化快,开发周期要求尽量短,接下来一系列文章从实际使用出发总结一些常用的代码片段,便于查找,也为后来人提供一份参考. 1.获取Manifest的基本信息(升级页面和软件关于页面一 ...

  7. Javascript起源...

    Javascript的设计思路是这样的: (1)借鉴C语言的基本语法: (2)借鉴Java语言的数据类型和内存管理: (3)借鉴Scheme语言,将函数提升到"第一等公民"(fir ...

  8. Node之集群

    介绍 众所周知,Node.js运行在Chrome的JavaScript运行时平台上,我们把该平台优雅地称之为V8引擎.不论是V8引擎,还是之后的Node.js,都是以单线程的方式运行的,因此,在多核心 ...

  9. 虚拟机service network restart没有反应解决方法

      一般我们新copy的虚拟机或新克隆的虚拟机第一次启动时都会出现没有ip地址的情况: [root@zejin243 network-scripts]# ifconfig lo        Link ...

  10. [Code] C#与js的正则表达式

    元字符: 单个字符: . [] 限定符: * + ? {n} {n,} {n,m} 头尾: ^ $' 其他: | () 正则表达式在js和C#中都有. C#中: 创建: var regex = new ...