包含选择符（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. 使用U盘为虚拟机安装系统

    前提:使用虚拟机安装WIN8系统时,由于WIN8镜像文件大于4G无法使用虚拟安装,所以使用U盘安装. 1.装有U盘启动的WINPe系统 (1)下载 老毛桃U盘启动盘制作工具 (2)U盘清空 2.虚拟机 ...

  2. idea设置文件的编码格式为utf-8

    file ---> settings... 然后 editor --->  file encoding 然后设置path和encoding什么的.

  3. 20165336 2017-2018-2《Java程序设计》课程总结

    每周作业链接汇总 我期望的师生关系:对师生关系的看法 学习基础和C语言基础调查:关于学JAVA与C的调查 Linux安装及学习:Linux的安装 第一周学习总结:认识学习JAVA 第二周学习总结:JA ...

  4. java版迷宫

    当年学数据结构,正好java也刚刚学会gui编程,就想着结合起来做个小东西,然后这个自动走路的小球就出来了. 一个方向的枚举Dir.java public enum Dir { L,U,R,D } 结 ...

  5. eslint 在VSCode中不能使用

    在VSCode中安装号eslint插件,还是不能使用,还需安装 npm install eslint-plugin-promise --save-dev 我也不知道为什么?我现在只是用两天不到vsco ...

  6. oracle中nvarchar2()和varchar2()的区别

    1.NVARCHAR2(10)是可以存进去10个汉字的,如果用来存英文也只能存10个字符. 2.而VARCHAR2(10)的话,则只能存进5个汉字,英文则可以存10个.

  7. RSA 理论

    一.同余 给定一个正整数m,如果两个整数a和b满足(a-b)能够被m整除,即(a-b)/m得到一个整数,那么就称整数a与b对模m同余,记作a≡b(mod m) 二.欧拉定理 任意给定正整数n,请问在小 ...

  8. 设置帝国cms文章标题 真正符合百度建站标准

    百度建站指南中有提到内容页的标题设置,标题描述清晰最好包含主站和频道信息:内容标题_频道名称_网站名称.帝国cms文章标题一般默认是内容标题_网站名称,那么如何调用当前文章的频道名称(分类名称)呢? ...

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

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

  10. 帝国cms面包屑导航的首页链接锚文本改成关键字

    帝国cms面包屑导航的首页链接关键字一般都是“首页”二字或home,如果你想从这里提高锚文字的相关性,可以改成相应的关键字,那么如何来修改呢? 我们知道帝国CMS面包屑导航的变量是[!--newsna ...