一、子选择器

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

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

二、简单例子

<!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. ruby -- 进阶学习（十五）friendly_id配置

    实现效果:http://127.0.0.1:3000/article/1  =>  http://127.0.0.1:3000/article/书名 (1)Rails 4.0的friendly_ ...

  2. AngularJS 五大特性，加快 Web 应用开发

    AngularJS 是谷歌的一个 JavaScript 框架,旨在简化前端应用程序的开发.如果你在开发单页的应用程序,我敢肯定你已经听说过它.我是 AngularJS 的忠实粉丝,在这篇文章中我将概述 ...

  3. ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar

    上次不足的改进 可能上一个贴子给大家带来很多误解,所以我这次把DEMO完善了两个版本 [ASP.NET WEBFROM]和[ ASP.NET MVC] 修改了一些BUG,并且修改了一些细了 在上个贴子 ...

  4. 《构建之法》阅读有疑 与 个人Week1作业

    <构建之法>阅读有疑 在用将近五节课的时间将邹欣老师的书<构建之法——现代软件工程>第二版大致看完.虽然全书是以轻松的口吻与”移山公司”员工的一些趣味谈话来传输一些理念和思想的 ...

  5. JavaScript学习总结 Ajax和Http状态字

    Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡. AJAX是不能跨域的,如需跨域,可以使用document.domain= ...

  6. sprint5.0

    团队成员完成自己认领的任务. 燃尽图:理解.设计并画出本次Sprint的燃尽图的理想线.参考图6. 每日立会更新任务板上任务完成情况.燃尽图的实际线,分析项目进度是否在正轨.每天的例会结束后的都为任务 ...

  7. Linq查询操作之Where筛选

    筛选操作where能够处理逻辑运算符组成的逻辑表达式.比如逻辑“与”,逻辑“或”,并从数据源中筛选数据,它和where子句的功能非常相似.Enumerable类的Where()原型如下: public ...

  8. C#基本概念列举说明

    1. 关键字      在C#代码中常常使用关键字,关键字也叫保留字,是对C#有特定意义的字符串.关键字在Visual Studio 环境的代码视图中默认以蓝色显示.例如,代码中的using.name ...

  9. JAVA的网络编程基础概念

    网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输.在TCP/IP协 ...

  10. 【C#进阶系列】08 方法

    实例构造与引用类型 之前的章节其实已经写过了引用类型的构造过程: 首先当然是,在堆中,为引用类型的实例对象分配内存,然后初始化对象的附加字段(即类型对象指针和同步块索引). 这个时候为对象分配的内存都 ...