包含选择符（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. linux 内核启动流程分析，移植

    分析 linux-2.6.22.6 内核启动流程 移植 linux-3.4.2 到 JZ2440 开发板 Linux内核源码百度云链接: https://pan.baidu.com/s/1m1ymGl ...

  2. 【Loadrunner】Loadrnner 参数化策略

    Loadrnner 参数化策略 参数化策略 关键:类型+数据+策略 1.Select next row ( 如何取) 选择下一行 1)Sequential:顺序的 每个VU都从第一行开始,顺序依次向下 ...

  3. （4.25）格式化T-SQL工具

    写代码的一个重要方面是格式化.没有人喜欢格式错误的代码.对于继承它的人,甚至是作者,他/她在一周左右后检查它是很难理解/维护的 我确实理解开发人员在严格的交付准则下工作,没有人会想要延迟交付,而不是格 ...

  4. 用laravel dingo/api创建简单的api

    1,修改.env配置文件添加 API_STANDARDS_TREE=vnd API_SUBTYPE=myapp API_PREFIX=api API_DOMAIN=null API_VERSION=v ...

  5. 如何将文章列表用<li>分两列显示

    我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们? 其实相对比较简单,用几行css样式定义一下就够了,可以用div + css来控制 ...

  6. 20180310 KindEditor 富文本编辑器

    问题: 如何判断富文本编辑器文本内容非空 错误的办法,采用js 对控件本身的txt ID 号抓取获取值,由于加载富文本编辑器时,界面的ID 已经经过了修改或者可以用转换来说,所以抓取是无效果的. 需要 ...

  7. 常见Chrome 插件

    Chrome插件网:http://chromecj.com/downloadstart.html Chrome浏览器:http://chromecj.com/chrome/2014-09/177.ht ...

  8. 显示日期的指令： date

    1.显示日期的指令: date (1)参数: (2)实例

  9. Redis入门到高可用（六）—— 字符串

    一.结构和命令 1.字符串键值结构 key是字符串,value可以是字符串.数字.二进制.json等: redis的key和string类型value限制均为512MB. 2.使用场景 ♦️ 缓存 ♦ ...

  10. vue中computed和watch的用法

    computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理: computed比较适合对多个变量或 ...