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. JS 验证

    JS 验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML ...

  2. 对于写Java的博文

    其实我是有过想要自己总结java相关的知识点给大家分享,但我的Java并不很好,大多数情况我只是拿Java当工具,写一些自己所需一些简单的东西,因此,大多数碰到我不懂的Java问题时,我也是上博客园, ...

  3. dedecmsV5.7 arclist 如何调用副栏目的文章

    问题:用arclist 调用某个栏目下的文章的时候,发现无法调用出副栏目是这个栏目的文章. 然后就上百度搜了一番,记录一下我搜到的解决方法: 1.打开/include/taglib/arclist.l ...

  4. SQL注入：POST注入

    POST注入简介 POST注入属于注入的一种,相信大家在之前的课程中都知道POST\GET两种传参方式. POST注入就是使用POST进行传参的注入,本质上和GET类型的没什么区别. POST注入高危 ...

  5. Sublime Text 3如何关闭自动更新

    1.Preferences -> Settings-User 2.插入下面代码:"update_check": false 如果有其他的设置,用逗号隔开,然后保存 3.Pre ...

  6. 线性代数笔记24——微分方程和exp(At)

    原文:https://mp.weixin.qq.com/s/COpYKxQDMhqJRuMK2raMKQ 微分方程指含有未知函数及其导数的关系式,解微分方程就是找出未知函数.未知函数是一元函数的,叫常 ...

  7. Python入门基础学习(面向对象)

    Python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内 继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...

  8. java8-10-Stream的终止操作

      Stream的终止操作   * allMatch 是否匹配所有 * anyMatch 是否匹配一个 * noneMatch 是否没有匹配一个 * findFirst 返回第一个   * count ...

  9. RabbitMQ入门及其几种工作模式

    1.简介 MQ全程Message Queue,用于应用程序和应用程序间进行通信.RabbitMQ采用Erlang编写,实现了AMQP(高级消息队列)协议,跨平台,支持各种主流的操作系统和多种客户端. ...

  10. layUI学习第三日：layUI模块化开发

    layui 定义为「经典模块化」,具备早前 AMD 的影子,又并非受限于 CommonJS 的那些条条框框, BootStrap 的不同在于:layui 糅合了自身对经典模块化的理解. 除了 layu ...