包含选择符（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. 配置ASM以及创建恢复目录

    本次配置ASM沿用了搭建RAC的环境配置,系统选用CENTOS6.8 首先本地配置YUM,安装GRID集群件所需要的RPM包 [root@rac01 Packages]# cd /etc/yum.re ...

  2. js阻止默认事件，如a标签跳转和事件冒泡

    禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...

  3. QT4.5.3移植到hi3536

    QT版本:qt-embedded-linux-opensource-src-4.5.31.添加交叉编译(1)copy qt-embedded-linux-opensource-src-4.5.3/mk ...

  4. 强制禁用gitlab的双因子认证：Two-Factor Authentication

    (一)问题描述: 此博客解决如下问题:禁用gitlab的双因子认证 禁用前,如图(此时,你在gitlab中什么也干不了) (二)思路分析: 百度了很多方法,都不可靠(如不可靠的说明:https://s ...

  5. sql server误删数据恢复delete（低效版）

    关键词:sql server误删数据恢复,mssql误删数据恢复,delete --切换数据库 use master --构建函数 Create PROCEDURE Recover_Deleted_D ...

  6. perfmon——使用windows系统自带的性能监视器监控进程信息

    第一次使用perfmon监控应用进程的信息,步骤总结如下: 第一部分 性能监视器 1.快捷键Win+R打开运行界面,输入“perfmon”命令后回车即可打开windows的性能监视器 2.点击“性能监 ...

  7. python的运行机制

    不需要生成二进制代码,python解释器把源码->字节码,然后在执行这些字节码. 解释器的具体工作: 1.完成模块(module)的加载和链接 2.将源代码编译成pyCodeObject(字节码 ...

  8. 118A

    #include <iostream> #include <cctype> #include <string> using namespace std; int m ...

  9. Linux命令：tar命令批量解压方法总结

    tar命令批量解压方法总结 (2010-05-24 17:48:46) 转载▼ 标签: tar 批量解压 杂谈 分类: linux学习 由于linux的tar命令不支持批量解压,所以很多网友编写了好多 ...

  10. 块结构在文件中的表示IOB【转载】

    转自:http://www.coderjie.com/blog/43b3601e0a2411e7841d00163e0c0e36 1.块在内存中以树的形式存储,分好块的文本在文件中用IOB标记存储: ...