一、子选择器

子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。

子选择器是根据左侧选择符指定的父元素，然后在该父元素下寻找匹配右侧选择符的子元素。

二、简单例子

<!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 type="text/css" rel="stylesheet" href="css/demo5.css"/>

</head>

<body>

<div>

  <p>这是个段落

   <a href="#">这是超连接</a>

  </p>

</div>

</body>

</html>
@charset "utf-8";

/* CSS Document */

/*设置div下的p元素的样式*/

div>p{

    font-size:14px;

    color:#0000FF;

    }

/*设置p元素下的a元素的样式*/

p>a{

    font-size:16px;

    color:#FF0000;

    text-decoration:none;

}

/*错误的写法 div 与a不是父子关系时，是取不到的*/

div>a{

    font-size:20px;

    color:#FF0000;

    text-decoration:none;

}

子选择器很少用到，一般使用包含选择可以不受父子关系影响的选择

以下写法包含选择器

div a{

    font-size:20px;

    color:#FFFF00;

    text-decoration:none;

}

CSS 子选择器(六)的更多相关文章

  1. CSS子选择器与后代选择器的区别

    p > span{ color:blue; } <p> 嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙 ...

  2. css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器

    记录一下前一段时间使用.学习的几种选择器. 1. :frist-child 选择器n 比如<ul><li></li> <li></li> & ...

  3. 新的 css 子选择器

    1. html 结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  5. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  6. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  9. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

随机推荐

  1. Qt4.8.6 Embedded Linux 的编译与移植

    最近买了个飞凌ok6410 的开发板,于是在其中搭建qt4.8.6运行环境.费了两三天时间,主要还是对Linux系统的生疏,在一些问题上徘徊很久,在这里做一些过程笔记.烧写ARM-Linux系统,根据 ...

  2. Lua中的协同程序 coroutine

    Lua中的协程和多线程很相似,每一个协程有自己的堆栈,自己的局部变量,可以通过yield-resume实现在协程间的切换.不同之处是:Lua协程是非抢占式的多线程,必须手动在不同的协程间切换,且同一时 ...

  3. Unity 资源管理与更新

    当你在 工程目录下的 Asset 文件夹中放置一个文件时(电脑上的文件夹,不是 Unity 界面中的文件夹),Unity会自动检测到一个新的文件被添加(Unity会不停地检查Assets文件夹中的内容 ...

  4. linux 硬盘分区，分区，删除分区，格式化，挂载，卸载笔记

    linux 虽然一直都有在玩,但是对硬盘操作确实不是很熟悉今天有空,就整理了下. 1, 创建分区 先查看下是否有磁盘没有分区 fdisk -l 其中第一个框和第二个框,是已经分好区的磁盘,第三个硬盘没 ...

  5. html5 自定义数据属性 ，也就是 data-* 自定义属性---笔记。

    html5  自定义数据属性 ,也就是 data-* 自定义属性.  例如 <div data-last-value="43" data-hidden="true& ...

  6. ServiceStack Redis客户端的bug

    client.Set("key", 0); 当使用上面的语句设置 真正存入redis的却是一个空白字符,而不是0 跟了一下源码,发现 private static byte[] T ...

  7. [Python] Remote debugging by Pycharm

    From: http://blog.csdn.net/u013088062/article/details/50170551 虚拟环境配置 配置远程解释器 设想这样一种情况,你在一个平台上操作你的工程 ...

  8. Hadoop入门进阶课程3--Hadoop2.X64位环境搭建

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  9. Node.js 入门手册：那些最流行的 Web 开发框架

    这篇文章与大家分享最流行的 Node.js Web 开发框架.Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编 ...

  10. [转]提高 Linux 上 socket 性能，加速网络应用程序的 4 种方法

    原文链接:http://www.ibm.com/developerworks/cn/linux/l-hisock.html 使用 Sockets API,我们可以开发客户机和服务器应用程序,它们可以在 ...