一、子选择器

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

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

二、简单例子

<!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. codeforces Fedor and New Game

    #include<iostream> #include<stack> #include<cstring> #include<cstdio> #inclu ...

  2. Socket.IO 1.0 正式发布，快速可靠的实时引擎

    Socket.IO 是目前 Web 领域最火的实时引擎,用于实现基于事件的双向实时的通信.它适用于任何平台,浏览器或设备,专注于可靠性和速度.您可以将数据推送到客户端,并获得实时的计数,日志或图表. ...

  3. 远程方法调用（RMI）原理与示例

    RMI介绍 远程方法调用(RMI)顾名思义是一台机器上的程序调用另一台机器上的方法.这样可以大致知道RMI是用来干什么的,但是这种理解还不太确切.RMI是Java支撑分布式系统的基石,例如著名的EJB ...

  4. [C#] CSharp 基本语法

    CSharp Language Specification 一.基础 1.规范: 除常量外,所有变量用驼峰命名方式,其它用帕斯卡命名方式. 2.编译: 首先由csc.exe将cs文件编译成MSIL.当 ...

  5. Lucene-Analyzer

    Lucene文本解析器实现 把一段文本信息拆分成多个分词,我们都知道搜索引擎是通过分词检索的,文本解析器的好坏直接决定了搜索的精度和搜索的速度. 1.简单的Demo private static fi ...

  6. jqGrid动态列

    HTML代码: <div id="divList"> <div class="toolbar"> </div> <ta ...

  7. 脊柱外科病人资料管理系统的界面设计分析(2)--JOA评分记录的实现

    在上篇随笔<脊柱外科病人资料管理系统的界面设计分析>中介绍了一些常用的界面设计方面的内容,本篇继续上一篇,介绍脊柱外科病人管理系统的JOA评分记录模块的界面设计以及实现方面的内容. JOA ...

  8. csharp: Procedure with DAO(Data Access Object) and DAL(Data Access Layer)

    sql script code: CREATE TABLE DuCardType ( CardTypeId INT IDENTITY(1,1) PRIMARY KEY, CardTypeName NV ...

  9. [Eclipse] - 解决导入flask模块出现的Unresolved Import flask问题

    http://www.cnblogs.com/mizhon/p/4242073.html [Eclipse] - 解决导入flask模块出现的Unresolved Import flask问题 最近想 ...

  10. PDT已有很大改进

    受够了NB的低性能文件扫描,也许是时候放弃Netbeans迎接PDT了.