zoukankan      html  css  js  c++  java
  • css的组合选择器

    组合选择器

    '''
     E,F         多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔         div,p { color:#f00; }
    
     E F         后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔    li a { font-weight:bold; }
    E > F 子元素选择器,匹配所有E元素的子元素F div > p { color:#f00; } E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }
    '''

    注意嵌套规则

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
    2. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
    3. li内可以包含div
    4. 块级元素与块级元素并列、内联元素与内联元素并列。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="css组合选择器">
        <meta name="description" content="学而不思则罔,思而不学则殆">
        <meta http-equiv="Refresh" content="120;https://www.baidu.com">
        <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
        <title>Title</title>
        <link rel="stylesheet" href="day104.css">
        <link rel="icon" href="https://www.baidu.com/favicon.ico">
        <!--<script src="js.js"></script>-->
    </head>
    
    <body>
        <p id="p1">p0</p>
    
        <div class="div0">div0</div>
    
        <div class="div1">
            <div>
                <a href="">a</a>
                <p>p1</p>
                <div>div</div>
                <div class="div3"> div3</div>
            </div>
            <p>p2</p>
            <div class="div2">div2</div>
            <p class="p3">p3</p>
        </div>
    
        <div> after1</div>
    
        <div> after2</div>
    </body>
    </html>
    #p1,div.div{
        color: springgreen;
    }
    /*多元素选择器,同时匹配这两个元素,中间以逗号隔开*/
    
    div.div1 div{
        color: red;
    }
    
    div.div1 div.div2{
        color: gold;
    }
    
    div.div1 div div{
        color: seagreen;
    }
    
    div.div1 div.div3{
        color: deepskyblue;
    }
    /*后代选择器,匹配所有属于该元素的后代元素(隔代也可以),以空格分割*/
    
    div.div1>div>p{
        color: yellow;
        background-color: red;
    }
    /*子元素选择器,匹配该元素的子元素,不能隔代,大于号(>)表示*/
    
    div.div1 + div + div{
        background-color: yellow;
    }
    /*毗邻元素选择器(毗邻代表紧挨着的意思),匹配紧随该元素之后(只能是往后不能往前)的同级元素*/
    while True: print('studying...')
  • 相关阅读:
    EurekaLog 6 安装在XE3中
    有趣的python精短程序
    python中的map,filter,reduce,lambda (转)
    python自动下载太平洋电脑网上的壁纸
    ASP.NET MVC Preview3 bug 及期望 [集]
    中小网站在域名、服务器等选择上的一点总结
    为ASP.NET MVC开发一些常用插件(三)——Repeater
    为ASP.NET MVC开发一些常用插件(二)—— 实现无刷新文件上传
    Implementing the Singleton Pattern in C#
    [原创]开发一个适合Ajax+JSON+jQuery环境使用的多功能页码栏——jPagerBar1.1.1
  • 原文地址:https://www.cnblogs.com/xuewei95/p/14945313.html
Copyright © 2011-2022 走看看