一、子选择器

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

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

二、简单例子

<!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. 用户无法进入SDSF，报NO GROUP ASSIGNMENT错误

    注:命令行小写部分表出需要根据自己的情况改变!! a)激活SDSF资源类 SETROPTS CLASSACT(SDSF) b)查看SDSF资源类的PROFILE RLIST SDSF * c)如果不存 ...

  2. 【HTML】Iframe中的onload事件

    当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index" ...

  3. DDD：Can I DDD？

    下面是<实现领域驱动>的作者给出的一段话: You can implement DDD if you have: A passion for creating excellent soft ...

  4. DDD：Strategic Domain Driven Design with Context Mapping

    Introduction Many approaches to object oriented modeling tend not to scale well when the application ...

  5. CentOS6.5菜鸟之旅：安装rpmforge软件库

    一.rpmforge软件库    rpmforge是包含4000多种CentOS软件的软件库,被CentOS社区认为是安全和稳定的软件库. 二.安装rpmforege       1. 在http:/ ...

  6. .net core 1.0 Web MVC 自定义认证过程

    通过官方的介绍可知,若要本地开始部署搭建一个基于.net core 1.0的Web应用,需要下载dotnet SDK,或在Visual Studio IDE之上安装相关插件以布置开发环境.为了使开发环 ...

  7. IE11之F12 Developer Tools--控制台工具(Console)

    前面我们介绍了IE11的Developer Tools中的第一个工具--DOM Explorer,这篇文章介绍第二个工具--控制台(Console),使用控制台工具查看错误和其他信息.发送调试输出.检 ...

  8. DOM中 property 和 attribute 详解

    被问到 property 和 attribute 的区别,想来也是要好好看一下. 一.基本概念区别 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计& ...

  9. JavaScript基础概念

    1.JavaScript在浏览器中是解释执行的: 2.JavaScript是一中弱类型的语言,在使用变量前,可以不用先申明: 3.JavaScript使用了对象对象程序设计思想: 4.JavaScri ...

  10. 从C#中通过Windows窗体添加信息到数据库 (添加学生信息)

    如上图所示界面,当我们点击保存按钮时将会将表格中的数据保存到数据库中去,与数据库进行一个交互 第一步我们就是要获取到表格中的数据 string pwd = textpwd.Text; //获得第一次输 ...