CSS 包含选择器(九)

一、包含选择器

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

定义包含选择器时,必须保证在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>

结果:

时间: 2024-10-05 04:09:28

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

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

CSS系列(7)CSS类选择器Class详解

这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p> (2)    类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

CSS 子选择器(六)

一.子选择器 子选择器中前后部分之间用一个大于号隔开,前后两部分选择符在结构上属于父子关系. 子选择器是根据左侧选择符指定的父元素,然后在该父元素下寻找匹配右侧选择符的子元素. 二.简单例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm

【css】css常用选择器

css常用选择器 * 通配选择器 选择文档中所以HTML元素 E 元素选择器  选择指定类型的HTML元素 #id ID选择器  选择指定ID属性值为"id"的任意类型元素 .class 类选择器   选择指定class属性值为"class"的任意类型的任意多个元素 selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并 E F 后代选择器(包含选择器)  选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选

css的选择器效率分析

我们都知道,CSS具有叠加性(同一个元素被多条样式规则指定),继承性(后代元素会继承前辈元素的一些样式和属性)和优先级 (由于CSS的叠加性和继承性,将产生优先级,这指的是哪条样式规则会最终作用于指定的元素,他只遵循一条规则,指定的越具体,优先级越高) 由上可知,选择器指定的越具体,那么他的优先级就越高, 在这里,我们来总结一下css的选择器: 一.基本选择器(标签选择器.通用选择器.类和ID选择器) 选择器 描述 CSS版本 E 标签选择器,匹配所有使用E标签的元素   * 通用元素选择器,匹

CSS类选择器和ID选择器

ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的. ID也可以用来标识持久的结构性元素,例如主导航或内容区域. ID还可以用来标识一次性元素,例如某个链接或表单元素. 一个ID只能应用于页面上的一个元素. 同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多.类非常适合表示内容的类型或其他相似的条目.例如有一个新闻页面,其中包含多篇新闻,代码如下所示 <div id="story-id-1"> <h2>ID</h2> <p

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

CSS样式选择器优先级

原文:CSS样式选择器优先级 CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如: 选择器 特殊性 (a,b,c,d) Style= ”” 1,