1.父子选择器

（1）01.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>

<link rel="stylesheet" href="my.css"  type="text/css"/>

</head>

<body>

你好，北京！

   <span class="style1">新闻1</span>

   <span class="style1">新闻2</span>

   <span class="style1">新闻3</span>

   <span class="style1">新闻4</span>

   <span class="style1">新闻5</span>

   <!--父子选择器使用-->

   <span id="style2">这是一则<span>非常重要</span>的新闻</span><br />

   <span id="style2">这是一则<span>非常<span>重要</span></span>的新闻</span><br />

   <a href="#">goto sohu</a><br />

   <a href="#">goto sina</a><br />

</body>

</html>

（2）my.css

@charset "utf-8";

/* CSS Document */

/*html的选择器*/

body {

    color:orange;

}

a:link {

    color:black;

    text-decoration:none;

}

a:hover {

    text-decoration:underline;

}

a:visited {

    color:red;

}

/*.style1 就是类选择器*/

.style1 {

    font-weight:bold;

    font-size:20px;

    background-color:pink;

    color:black;

}

/*#style2就是id选择器*/

#style2 {

    font-size:30px;

    background-color:silver;

    color:black;

}

/*#style2 span 就是父子选择器, #style2是父,span是子*/

#style2 span {

    font-style:italic;

    color:red;

}

/*#style2 span 就是父子选择器, #style2是父,span是子,也包含层次关系*/

#style2 span span{

    font-size:50px;

}

效果图：

总结：这里子选择器的标签是必须存在，就是<span>不能改成别的不存在的标记;这里#style2 span也包含层次关系，比如也可以写成#style2 span span

这样三层以上 很少使用。

            父子选择器使用于id选择器和class选择器！！！

css笔记08：id选择器之父子选择器的更多相关文章

  1. 晨读笔记：CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  2. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  3. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

  4. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  5. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  6. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  7. jquery选择器之层级选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. html 选择器之属性选择器

    属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式. 使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值. css3的属性选择器主要包括下面几种 ...

  9. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

随机推荐

  1. php 正则表达

    今天看书,看到代码里面出现了一段正则表达式匹配语句preg_match,感觉水很深的感觉,网上搜了一些资料,暂时没时间学习,但是觉得以后学的话有两个网址比较靠谱,如下: php正则表达式手册:php ...

  2. <Chapter 2>2-2-2.开发Python应用（Developing a Python App）

    对App Engine来讲最简单的Python应用是一个有两个文件的简单目录:一个称为app.yaml的配置文件,一个用于请求处理器的Python代码文件.包含app.yaml文件的这个目录就是这个应 ...

  3. android中向bitmap里写入文字

    public static Bitmap drawText2Bitmap(String text, int imgResourceId, Context mContext) { try { Resou ...

  4. 第三百零四天 how can I 坚持

    我以为我遇到了,却是痴心妄想啊.哪有那么好的事.其实也无所谓,淡定,却又有点不淡定了. 洗澡睡觉吧,明天还要上班呢. 应该摆脱这种状态. 什么都不想,放空.

  5. SpringMVC+Spring+Hibernate+Maven+mysql整合

    一.准备工作 1.工具:jdk1.7.0_80(64)+tomcat7.0.68+myeclipse10.6+mysql-5.5.48-win322. 开发环境安装配置.Maven项目创建(参考:ht ...

  6. Hive自定义UDAF详解

    遇到一个Hive需求:有A.B.C三列,按A列进行聚合,求出C列聚合后的最小值和最大值各自对应的B列值.这个需求用hql和内建函数也可完成,但是比较繁琐,会解析成几个MR进行执行,如果自定义UDAF便 ...

  7. AutoCAD.NET二次开发：扩展数据之XData

    结果缓存——ResultBuffer 结果缓存即 Autodesk.AutoCAD.DatabaseServices.ResultBuffer 类型,使用 ResultBuffer 对象时需要提供一个 ...

  8. Linux的运行级别和chkconfig用法

    Linux的运行级别和chkconfig用法        一.Linux的运行级别 在装MySQL的时候,才知道了Linux的运行级别这么一回事.汗…自己太水了…下面总结一下: 什么是运行级别呢?简 ...

  9. 【Android】Handler的应用（三）：从服务器端分页加载更新ListView

    在前面两节中,我们了解了如何从服务器中加载JSON数据. 现在,我们将把服务器中的JSON数据加载更新到ListView. 并且,结合之前博文的  “动态追加分页ListView数据”的相关知识,实现 ...

  10. MySQL BINARY和BIT类型

    BINARY和VARBINARY类型 BINARY和VARBIANRY类型同CHAR和VARCHAR类型相似,除了BIANARY和VARBINARY类型只包含二进制字符串,即它们只包含byte串而非字 ...