一、包含选择器

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

定义包含选择器时，必须保证在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. 基于jquery的响应式提示框SweetAlert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...

  2. SpringMVC Controller 返回值的可选类型

    spring mvc 支持如下的返回方式:ModelAndView, Model, ModelMap, Map,View, String, void. ModelAndView @RequestMap ...

  3. 快乐的JS正则表达式（二）

    在上一篇中介绍了一个test方法,在本文中将使用另外一个,exec方法可以找到匹配的结果并且返回结果以及位置.exec("正则"): 简单测试: var str = "{ ...

  4. CentOS6部署VNC服务端

    VNC (Virtual Network Computer)是虚拟网络计算机的缩写.VNC 是在基于 UNIX 和 Linux 操作系统的免费的开源软件,远程控制能力强大,高效实用,其性能可以和 Wi ...

  5. ruby -- 基础学习（一）项目文件夹说明

    App文件夹子文件夾功能介绍 (1)controllers  存放驱动业务逻辑的控制器 (2)helpers       存放视图辅助类,一些常用的代码段 (3)mailers       Rails ...

  6. Hadoop第4周练习—HDFS读写文件操作

    1    运行环境说明... 3 :编译并运行<权威指南>中的例3.2. 3 内容... 3 2.3.1   创建代码目录... 4 2.3.2   建立例子文件上传到hdfs中... 4 ...

  7. [linux]记录如何设置一个新的vps

    背景 我正在做一个小项目,做好了打算上线,所有需要买个服务器,看了一圈,发现还是卖个vps合算.买了之后,进行了一些列的设置,这里记录一下,以便后面查看. 系统: ubuntu 内存:1G 一.更改时 ...

  8. 开放产品开发（OPD）：Archi 汉化工具下载

    本文更新版本已挪至  http://www.zhoujingen.cn/blog/3378.html ------------------------------ 在OPD中,我们使用了ArchiMa ...

  9. ASP.NET MVC分页实现

    ASP.NET MVC中不能使用分页控件,所以我就自己写了一个分页局部视图,配合PageInfo类,即可实现在任何页面任意位置呈现分页,由于采用的是基于POST分页方式,所以唯一的限制就是必须放在FO ...

  10. 【推荐】oc解析HTML数据的类库（爬取网页数据）

    TFhpple是一个用于解析html数据的第三方库,本人感觉功能还算可以,只不过在使用前必须配置项目. 配置 1.导入libxml2.tbd 2.设置编译路径 使用 这里使用一个例子来说明 http: ...