包含选择符（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. Selenium功能自动化测试工具

    Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite ...

  2. Maven项目常见的小问题

    pom.xml文件头报错 场景 例Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from ...

  3. java Map 怎么遍历

    java中遍历MAP的几种方法 Java代码 Map<String,String> map=new HashMap<String,String>();    map.put(& ...

  4. react-native-image-picker iOS设置

    效果图,因为我用的是模拟器,所以拍照功能没有效果,不过可从相册选择,下面是具体的效果图 把react-native-image-picker添加到项目 yarn add react-native-im ...

  5. 自动化工具之三：pywinauto

    Python自动化工具:pywinauto 一.pywinauto的安装 (1)安装命令 pip install -U pywinauto/pip3 install -U pywinauto (2)验 ...

  6. shell脚本编写实例

    实际案例 1.判断接收参数个数大于1 [ $# -lt 1 ] && echo "至少需要一个参数" && { echo "我要退出了.. ...

  7. web应用1

    阅读内容 一.web应用 二.web协议 三.web框架 四.补充知识 回到顶部 一.web应用 二.web协议 三.web框架 四.补充知识 五.补充知识

  8. push到Git时常见的失败

           之前学用git的时候,不想记命令,总是gui和bash交互的用,但是发现总出现push失败的问题,用gui来fetch的时候,显示下拉成功,但事实上并没有,这时候得在bash上用命令来下 ...

  9. Ubuntu中Redis的安装与使用

    安装 安装Redis服务器端 apt-get install redis-server 安装完成后,Redis服务器会自动启动,我们检查Redis服务器程序. 检查Redis服务器系统进程 ps -a ...

  10. [LeetCode] 840. Magic Squares In Grid_Easy

    A 3 x 3 magic square is a 3 x 3 grid filled with distinct numbers from 1 to 9 such that each row, co ...