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. 机器学习中的数学(1)-回归(regression)、梯度下降(gradient descent)

    版权声明: 本文由LeftNotEasy所有,发布于http://leftnoteasy.cnblogs.com.如果转载,请注明出处,在未经作者同意下将本文用于商业用途,将追究其法律责任. 前言: ...

  2. 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇06：计分》

    6.计分 计分概述: 分值计量直接反应玩家在游戏中获得的成就感.因此,计分系统在游戏中显得尤为重要,有的反应在直接获取的分数上,有的反应在杀敌数量上等. 计分原理: 原理图,如图6-1所示. 图6-1 ...

  3. git常用命令[持续更新]

    git commit -am "abc" 提交已经删除过的文件 git reset --hard HEAD 用于清除跟踪文件的修改

  4. 防asp木马运行

    首 页 > 技术支持 防asp木马运行 目前比较流行的ASP木马主要通过三种技术来进行对服务器的相关操作. 一.使用FileSystemObject组件 FileSystemObject可以对文 ...

  5. 设置结点的ID为固定ID

    https://www.java.net//forum/topic/jxta/jxta-community-forum/how-initialize-pse-jxse-27 ————————————— ...

  6. Spring EL ternary operator (if-then-else) example

    Spring EL supports ternary operator , perform "if then else" conditional checking. For exa ...

  7. [Xcode使用 - 3] 复制Xcode5.1.1中的项目模板到Xcode6.1

         由于Xcode6中精简了许多的项目和文件模板,导致开发非常不方便,所以这里简单介绍了怎么复制旧版本Xcode中的模板到新的Xcode中      这里要复制的是项目模板Empty Appli ...

  8. C#中ArrayList和string,string[]数组的转换

    转载原地址: http://www.cnblogs.com/nextsoft/articles/2218689.html 1.ArrarList 转换为 string[] : ArrayList li ...

  9. 修改mysql字符编码出现Job failed to start解决办法

        从网上找到如下资料: $sudo gedit /etc/mysql/my.cnf [client]下添加: default-character-set=utf8 [mysqld]下添加: de ...

  10. c++回调函数

    dcc组件支持回调函数接口,当连接/断开连接对端时,调用传入的函数指针. A库和B库想做到不耦合,但是A库需要用到B库的某些函数,A库提供回调函数接口,在初始化的时候指定回调函数,降低耦合程度,每一个 ...