包含选择符（E F）

          选择所有被E元素包含的F元素

  • 与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #firstdiv p{

                color: #0000FF;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div id="firstdiv">

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul>

                <li>Java</li>

                <li>C#</li>

            </ul>

            <div>

                <p>第三个段落。</p>

            </div>

        </div>

    </body>

</html>

   子选择符（E>F）

          选择所有作为E元素的子元素F

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #firstdiv>p{

                color: #0000FF;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div id="firstdiv">

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul>

                <li>Java</li>

                <li>C#</li>

            </ul>

            <div>

                <p>第三个段落。</p>

            </div>

        </div>

    </body>

</html>

   相邻选择符（E+F）

          选择紧贴在E元素之后F元素，元素E与F必须同属一个父级

  • 与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul+div{

                color: #0000FF;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div id="firstdiv">

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul>

                <li>Java</li>

                <li>C#</li>

            </ul>

            <div>

                <p>第三个段落。</p>

            </div>

            <div>

                <p>第四个段落。</p>

            </div>

        </div>

    </body>

</html>

   兄弟选择符（E~F）

          选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级

  • 需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            ul~div{

                color: #0000FF;

                font-weight: bold;

            }

        </style>

    </head>

    <body>

        <div id="firstdiv">

            <p>第一个段落。</p>

            <p>第二个段落。</p>

            <ul>

                <li>Java</li>

                <li>C#</li>

            </ul>

            <div>

                <p>第三个段落。</p>

            </div>

            <div>

                <p>第四个段落。</p>

            </div>

        </div>

    </body>

</html>

CSS选择符-----关系选择符的更多相关文章

  1. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  2. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. CSS基础篇之选择符

    关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...

  4. CSS选择符-----元素选择符

       通配选择符(*)           选定所有对象 通配选择符(Universal Selector) 通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用 & ...

  5. CSS全览_选择符+特指+单位+字体

    CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...

  6. CSS基础篇之选择符2

    属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...

  7. .NET 基础 一步步 一幕幕[运算符、占位符、转义符]

      运算符.占位符.转义符 好吧,在五局全胜之后,终于升到了三个钻,距离一个星星还有一大段距离,忽然想起来今天的博客还没写,果断坑队友,来写博客了....感觉以后还是每天更新一篇比较好.要不晚上就该熬 ...

  8. CSS中的关系选择器

    关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择 ...

  9. （转载）SQL去除回车符，换行符，空格和水平制表符

    http://www.cnblogs.com/insus/p/4815336.html MS SQL去除回车符,换行符,空格和水平制表符,参考下面语句,一般情况是SQL接受富文本或是textarea的 ...

随机推荐

  1. 【PyQt5-Qt Designer】简易的数字键盘输入+简易计算器

    参考如下键盘格式写了一个键盘输入,目前还不能进行运算,后期完善... 效果如下: 完整代码: from PyQt5.QtWidgets import (QApplication,QWidget,QPu ...

  2. Java Web----------response&&request

    1.response 代表响应, 可以理解为一个空的箱子,我们在里面填入要发送到浏览器的内容. 服务器会把这些内容组装成http响应. 1.1 响应首行 协议/版本号 状态码 状态码描述 添加状态码 ...

  3. redis 的消息队列 VS kafka

    redis push/pop VS pub/sub (1)push/pop每条消息只会有一个消费者消费,而pub/sub可以有多个 对于任务队列来说,push/pop足够,但真的在做分布式消息分发的时 ...

  4. 微信公众号ID也可以修改了！

    差不多一年前,微信团队宣布个人类帐号一个自然年内可主动修改两次名称,那一天大家奔走相告纷纷修改成自己早就心仪的名字,有人猛然发现公众号名字改了,可ID还是xiaopipi(小屁屁)这可如何是好,洗不去 ...

  5. css垂直居中怎么设置?文字上下居中和图片垂直居中

    css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...

  6. OC动画：CAKeyframeAnimation

    // 方法一 用法1​ Value方式 //创建动画对象 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyP ...

  7. what's the python之自定义模块和包

    模块自定义 上节说了有关模块的知识,当时所说的模块都是内置模块,现在来看自己定制的模块,即模块也可以自定义. 模块的自定义就是指写一段python文件,一般情况下里面包含了可执行的语句和函数的定义,其 ...

  8. 如何在ASP.NET 网站项目中使用C# 6？

    作者:Generic链接:https://www.zhihu.com/question/48864375/answer/113316462来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  9. java native方法及JNI实例 （转）

    转自:http://blog.csdn.net/xw13106209/article/details/6989415 1.参考文献: http://blog.csdn.net/youjianbo_ha ...

  10. Kalman滤波学习

    两个过程: 预测过程和更新过程 1.基本原理 2.IMU应用Kalman滤波求角速度. https://github.com/jjundot/MPU6050_Kalman