HTML&CSS基础-子元素和后代元素选择器

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.html源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子元素和后代元素选择器</title> <style type="text/css">
/**
*
* 后代元素选择器:
* 作用:
* 选中指定元素的指定后代元素。后代元素选择器最好不要写太长,最好别超过3个,否则可能会出现性能有影响
* 语法:
* 祖先元素 后代元素{}
*
* 案例如下:
* 为div中的span设置一个颜色为红色
* 将div的id为d1的元素下的span元素的内容设置为黄绿色
*
*/
div span{
color: red;
} #d1 span{
color: greenyellow;
} /**
* 子元素选择器
* 作用:
* 选中指定父元素的指定子元素,需要注意的是,IE6及以下的浏览器不支持子元素选择器
* 语法:
* 父元素 > 子元素
*
* 案例如下:
* 为div的子元素span设置一个背景颜色为黄色
*
*/
div > span{
background-color: yellow;
} </style>
</head>
<body> <!--
元素之间的关系:
父元素:
直接包含子元素的元素
子元素:
直接被父元素包含的元素
祖先元素:
直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:
直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:
拥有相同父元素的元素叫做兄弟元素
-->
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div> <div>
<span>我是div标签中的span</span>
</div> <span>我是body中span元素</span>
</body>
</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-子元素和后代元素选择器的更多相关文章

  1. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  2. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  3. jQuery查找子元素与后代元素

    1. 子元素: $().children('选择器')  如选择type为file的子元素  $(this).children("input[type=file]") 或者 $(& ...

  4. jQuery选择:子代元素与后代元素的区别

    (1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...

  5. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  6. HTML+css基础 标签的起名 style标签 选择器的使用规则

    标签的起名: 1. 官方提供的标签名 2. 类名: 用class属性起的名字 3. Id名: 用id属性起的名字 唯一的 我们把这种起名叫选择器 class选择器 id选择器  标签选择器 style ...

  7. CSS基础知识(概念、块级元素、行内元素、选择器)

    1.CSS概念 全称为Cascading Style Sheets(层叠样式表),支持专有的文件 - 扩展名为".css" 作用:将HTML的结构(HTML标签即html)与样式( ...

  8. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  9. jquery选择器 之 获取父级元素,子元素,同级元素

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

随机推荐

  1. Android App图片资源文件压缩利器McImage

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/195 Android App图片资源文件压缩利器McIma ...

  2. gradle+shell实现自动系统签名

    前言 有时候我们的应用需要系统级的权限来实现一些功能(如静默安装),这时候需要给应用打上系统签名,常规操作打包apk,解压apk,删除META-INF中CERT.RSA和 CERT.SF,然后压缩,用 ...

  3. 程序运行时间测试 - 使用系统函数 getrusage 获取程序运行时间

    https://github.com/yaowenxu/Workplace/blob/master/timer/getrusagetimer.c 关键结构体: struct rusage { stru ...

  4. android 完全区分double-tap 与 singal-tap 的方法

    需求:viewpager显示图片,需要在双击时对图片进行缩放,单击时在屏幕下方弹出popwindow,由于android的双击本质就是两次单击,但是又不想在双击时触发单击时的动作,所以就在网上各种搜解 ...

  5. QPNP 8909 8916 充电相关(1)【转】

    最近一直在搞电源管理相关内容,之前是8610的bms,现在8916的bms,发现两者还是有点区别的,8916把对last_ocv_uv的估值算法分装成执行文件,作为服务一直运行. 电源管理方面,应该是 ...

  6. mtu测试

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jeromezmzx007/article ...

  7. CodeForces 862B(思维+二分图染色)

    题意 https://vjudge.net/problem/CodeForces-862B 给出n个点,n-1条边,求再最多再添加多少边使得二分图的性质成立 思路 因为题目是求的最多添加多少边,所以可 ...

  8. 对比keep-alive路由缓存设置的2种方式

    方式有两种 .路由元信息(2.1.0版本之前) .属性方式(2.1.0版本之后新增) Vue2.1.0之前: 想实现类似的操作,你可以: 配置一下路由元信息 创建两个keep-alive标签 使用v- ...

  9. Java解析XML字符串,取出其中<aaaa><![CDATA[(XXX)]]></aaa>里面的XXX值,也可以使用xml解析的其他方式,这是最简单的字符串解析

    直接贴一段业务代码,这段代码是解析请求返回的xml格式字符串,为了取出其中的值便于下一步的使用. @RequestMapping(value="/search",produces ...

  10. oracle查询字段重复数据

    select in_ordr_no,count(*) from t_pay_jnl group by in_ordr_no having count(*) > 按照字段in_ordr_no查询重 ...